@consta/uikit 4.4.1 → 4.5.1
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/__internal__/src/components/Checkbox/Checkbox.css +2 -2
- package/__internal__/src/components/Checkbox/Checkbox.d.ts +1 -1
- package/__internal__/src/components/Checkbox/Checkbox.js +1 -1
- package/__internal__/src/components/Checkbox/Checkbox.js.map +1 -1
- package/__internal__/src/components/CheckboxGroup/CheckboxGroup.css +1 -1
- package/__internal__/src/components/CheckboxGroup/helper.d.ts +1 -1
- package/__internal__/src/components/CheckboxGroup/types.d.ts +1 -1
- package/__internal__/src/components/CheckboxGroup/types.js +1 -1
- package/__internal__/src/components/CheckboxGroup/types.js.map +1 -1
- package/__internal__/src/components/EventInterceptor/propsHandlers/useCheckboxEventsHandler.d.ts +2 -2
- package/__internal__/src/components/Skeleton/Skeleton.css +1 -1
- package/__internal__/src/components/Skeleton/SkeletonBrick/SkeletonBrick.js +1 -1
- package/__internal__/src/components/Skeleton/SkeletonBrick/SkeletonBrick.js.map +1 -1
- package/__internal__/src/components/Skeleton/SkeletonCircle/SkeletonCircle.js +1 -1
- package/__internal__/src/components/Skeleton/SkeletonCircle/SkeletonCircle.js.map +1 -1
- package/__internal__/src/components/Skeleton/SkeletonText/SkeletonText.d.ts +2 -2
- package/__internal__/src/components/Skeleton/SkeletonText/SkeletonText.js +1 -1
- package/__internal__/src/components/Skeleton/SkeletonText/SkeletonText.js.map +1 -1
- package/__internal__/src/components/Table/Header/TableHeader.js +1 -1
- package/__internal__/src/components/Table/Header/TableHeader.js.map +1 -1
- package/__internal__/src/components/Table/Table.js +1 -1
- package/__internal__/src/components/Table/Table.js.map +1 -1
- package/__internal__/src/components/Table/__mock__/data.mock.d.ts +9 -0
- package/__internal__/src/components/Table/__mock__/data.mock.js +1 -1
- package/__internal__/src/components/Table/__mock__/data.mock.js.map +1 -1
- package/__internal__/src/components/Table/helpers.d.ts +4 -3
- package/__internal__/src/components/Table/helpers.js +1 -1
- package/__internal__/src/components/Table/helpers.js.map +1 -1
- package/__internal__/src/components/Theme/_control/Theme_control_gpnDefault.css +1 -1
- package/__internal__/src/components/Theme/_font/Theme_font_gpnDefault.css +1 -1
- package/__internal__/src/uiKit/whitepaper/whitepaper.css +1 -1
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
.Checkbox{cursor:pointer;display:inline-flex;font-family:var(--font-sans);position:relative}.Checkbox_size_m{--checkbox-font-size:var(--control-text-size-m);--checkbox-size:var(--control-box-size-m);--checkbox-offset:var(--space-xs)}.Checkbox_size_l{--checkbox-font-size:var(--control-text-size-l);--checkbox-size:var(--control-box-size-l);--checkbox-offset:var(--space-s)}.Checkbox_view_primary{--checkbox-checked-border:var(--color-control-bg-primary);--checkbox-checked-background:var(--color-control-bg-primary);--checkbox-checked-check:var(--color-control-typo-primary);--checkbox-checked-border-hover:var(--color-control-bg-primary-hover);--checkbox-checked-background-hover:var(
|
|
1
|
+
.Checkbox{cursor:pointer;display:inline-flex;font-family:var(--font-sans);position:relative}.Checkbox_size_xs{--checkbox-font-size:var(--control-text-size-xs);--checkbox-size:var(--control-box-size-s);--checkbox-offset:var(--space-xs);--checkbox-arrow-width:calc(var(--space-3xs)*3/4)}.Checkbox_size_s{--checkbox-font-size:var(--control-text-size-s);--checkbox-size:var(--control-box-size-s);--checkbox-offset:var(--space-xs);--checkbox-arrow-width:calc(var(--space-3xs)*3/4)}.Checkbox_size_m{--checkbox-font-size:var(--control-text-size-m);--checkbox-size:var(--control-box-size-m);--checkbox-offset:var(--space-xs);--checkbox-arrow-width:var(--space-3xs)}.Checkbox_size_l{--checkbox-font-size:var(--control-text-size-l);--checkbox-size:var(--control-box-size-l);--checkbox-offset:var(--space-s);--checkbox-arrow-width:var(--space-3xs)}.Checkbox_view_primary{--checkbox-checked-border:var(--color-control-bg-primary);--checkbox-checked-background:var(--color-control-bg-primary);--checkbox-checked-check:var(--color-control-typo-primary);--checkbox-checked-border-hover:var(--color-control-bg-primary-hover);--checkbox-checked-background-hover:var(
|
|
2
2
|
--color-control-bg-primary-hover
|
|
3
|
-
)}.Checkbox_view_ghost{--checkbox-checked-border:var(--color-control-bg-border-default);--checkbox-checked-background:var(--color-control-bg-ghost);--checkbox-checked-check:var(--color-control-typo-ghost);--checkbox-checked-border-hover:var(--color-control-bg-border-default);--checkbox-checked-background-hover:var(--color-control-bg-ghost-hover)}.Checkbox_intermediate .Checkbox-Input,.Checkbox_intermediate .Checkbox-Input:checked,.Checkbox_intermediate:hover .Checkbox-Input,.Checkbox_intermediate:hover .Checkbox-Input:checked{background-color:var(--checkbox-checked-background);border-color:var(--checkbox-checked-border)}.Checkbox_intermediate .Checkbox-Input:before,.Checkbox_intermediate .Checkbox-Input:checked:before,.Checkbox_intermediate:hover .Checkbox-Input:before,.Checkbox_intermediate:hover .Checkbox-Input:checked:before{background-color:var(--checkbox-checked-check);border:none;opacity:1;transform:rotate(0) scaleY(.
|
|
3
|
+
)}.Checkbox_view_ghost{--checkbox-checked-border:var(--color-control-bg-border-default);--checkbox-checked-background:var(--color-control-bg-ghost);--checkbox-checked-check:var(--color-control-typo-ghost);--checkbox-checked-border-hover:var(--color-control-bg-border-default);--checkbox-checked-background-hover:var(--color-control-bg-ghost-hover)}.Checkbox_intermediate .Checkbox-Input,.Checkbox_intermediate .Checkbox-Input:checked,.Checkbox_intermediate:hover .Checkbox-Input,.Checkbox_intermediate:hover .Checkbox-Input:checked{background-color:var(--checkbox-checked-background);border-color:var(--checkbox-checked-border)}.Checkbox_intermediate .Checkbox-Input:before,.Checkbox_intermediate .Checkbox-Input:checked:before,.Checkbox_intermediate:hover .Checkbox-Input:before,.Checkbox_intermediate:hover .Checkbox-Input:checked:before{background-color:var(--checkbox-checked-check);border:none;opacity:1;transform:rotate(0) scaleY(.48) translateY(-50%);transition:opacity .15s,transform .15s,background-color .08s .04s}.Checkbox_disabled{pointer-events:none}.Checkbox_disabled .Checkbox-Input:disabled{background-color:var(--color-control-bg-disable);border-color:transparent}.Checkbox_disabled .Checkbox-Input:disabled:before{border-color:var(--color-control-typo-disable)}.Checkbox_disabled.Checkbox_intermediate .Checkbox-Input:disabled:before{background-color:var(--color-control-typo-disable)}.Checkbox_disabled .Checkbox-Input:disabled~.Checkbox-Label{color:var(--color-control-typo-disable)}.Checkbox_align_center{align-items:center}.Checkbox_align_top{align-items:top}.Checkbox_align_top .Checkbox-Input{margin-top:var(--space-3xs)}.Checkbox-Label{color:var(--color-control-typo-default);font-size:var(--checkbox-font-size);margin-left:var(--checkbox-offset)}.Checkbox-Input{-webkit-appearance:none;background-color:transparent;border:var(--control-border-width) solid var(--color-control-bg-border-default);border-radius:var(--control-radius);box-sizing:border-box;cursor:pointer;flex-shrink:0;height:var(--checkbox-size);margin:0;padding:0;position:relative;transition:border-color .15s,background-color .15s;width:var(--checkbox-size)}.Checkbox-Input:before{background-color:var(--color-control-bg-affect);border-bottom:var(--checkbox-arrow-width) solid var(--checkbox-checked-check);border-left:var(--checkbox-arrow-width) solid var(--checkbox-checked-check);box-sizing:border-box;content:"";height:calc(var(--checkbox-size)*.35);left:calc(var(--checkbox-size)/5 - 1px);opacity:0;position:absolute;top:calc(var(--checkbox-size)/2 - 1px);transform:rotate(-50deg) scaleX(0);transform-origin:0 0;transition:opacity .15s,transform .15s,background-color .08s;width:calc(var(--checkbox-size)*.6);z-index:1}.Checkbox-Input:checked{background-color:var(--checkbox-checked-background);border-color:var(--checkbox-checked-border)}.Checkbox-Input:checked:before{opacity:1;transform:rotate(-50deg) scale(1)}.Checkbox:hover .Checkbox-Input{border-color:var(--color-control-bg-border-default-hover)}.Checkbox:hover .Checkbox-Input:checked{background-color:var(--checkbox-checked-background-hover);border-color:var(--checkbox-checked-border-hover)}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import './Checkbox.css';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';
|
|
4
|
-
export declare const checkboxPropSize: readonly ["m", "l"];
|
|
4
|
+
export declare const checkboxPropSize: readonly ["m", "xs", "s", "l"];
|
|
5
5
|
export declare type CheckboxPropSize = typeof checkboxPropSize[number];
|
|
6
6
|
export declare const checkboxPropSizeDefault: CheckboxPropSize;
|
|
7
7
|
export declare const checkboxPropView: readonly ["primary", "ghost"];
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["checked","name","size","view","align","disabled","intermediate","className","label","onChange","onFocus","onBlur","readOnly","required","step","tabIndex","inputId","inputRef"];import"./Checkbox.css";import React from"react";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{cnMixFocus}from"../../mixs/MixFocus/MixFocus";import{cn}from"../../utils/bem";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";export var checkboxPropSize=["m","l"];export var checkboxPropSizeDefault=checkboxPropSize[0];export var checkboxPropView=["primary","ghost"];export var checkboxPropViewDefault=checkboxPropView[0];export var checkboxPropAlign=["center","top"];export var checkboxPropAlignDefault=checkboxPropAlign[0];export var COMPONENT_NAME="Checkbox";export var cnCheckbox=cn("Checkbox");export var Checkbox=React.forwardRef(function(a,b){var c=React.useRef(null),d=usePropsHandler(COMPONENT_NAME,a,c),e=d.checked,f=void 0!==e&&e,g=d.name,h=d.size,i=void 0===h?checkboxPropSizeDefault:h,j=d.view,k=void 0===j?checkboxPropViewDefault:j,l=d.align,m=void 0===l?checkboxPropAlignDefault:l,n=d.disabled,o=d.intermediate,p=d.className,q=d.label,r=d.onChange,s=d.onFocus,t=d.onBlur,u=d.readOnly,v=d.required,w=d.step,x=d.tabIndex,y=d.inputId,z=d.inputRef,A=_objectWithoutProperties(d,_excluded);return React.createElement("label",Object.assign({},A,{className:cnCheckbox({size:i,view:k,disabled:n,intermediate:void 0!==o&&o,align:m},[p]),ref:useForkRef([b,c])}),React.createElement("input",{type:"checkbox",name:g,className:cnCheckbox("Input",[cnMixFocus()]),checked:f,id:y,disabled:n,onChange:function handleChange(a){r&&r({e:a,checked:!f})},onFocus:s,onBlur:t,readOnly:u,required:v,step:w,tabIndex:x,ref:z}),q&&React.createElement("span",{className:cnCheckbox("Label")},q))});
|
|
1
|
+
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["checked","name","size","view","align","disabled","intermediate","className","label","onChange","onFocus","onBlur","readOnly","required","step","tabIndex","inputId","inputRef"];import"./Checkbox.css";import React from"react";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{cnMixFocus}from"../../mixs/MixFocus/MixFocus";import{cn}from"../../utils/bem";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";export var checkboxPropSize=["m","xs","s","l"];export var checkboxPropSizeDefault=checkboxPropSize[0];export var checkboxPropView=["primary","ghost"];export var checkboxPropViewDefault=checkboxPropView[0];export var checkboxPropAlign=["center","top"];export var checkboxPropAlignDefault=checkboxPropAlign[0];export var COMPONENT_NAME="Checkbox";export var cnCheckbox=cn("Checkbox");export var Checkbox=React.forwardRef(function(a,b){var c=React.useRef(null),d=usePropsHandler(COMPONENT_NAME,a,c),e=d.checked,f=void 0!==e&&e,g=d.name,h=d.size,i=void 0===h?checkboxPropSizeDefault:h,j=d.view,k=void 0===j?checkboxPropViewDefault:j,l=d.align,m=void 0===l?checkboxPropAlignDefault:l,n=d.disabled,o=d.intermediate,p=d.className,q=d.label,r=d.onChange,s=d.onFocus,t=d.onBlur,u=d.readOnly,v=d.required,w=d.step,x=d.tabIndex,y=d.inputId,z=d.inputRef,A=_objectWithoutProperties(d,_excluded);return React.createElement("label",Object.assign({},A,{className:cnCheckbox({size:i,view:k,disabled:n,intermediate:void 0!==o&&o,align:m},[p]),ref:useForkRef([b,c])}),React.createElement("input",{type:"checkbox",name:g,className:cnCheckbox("Input",[cnMixFocus()]),checked:f,id:y,disabled:n,onChange:function handleChange(a){r&&r({e:a,checked:!f})},onFocus:s,onBlur:t,readOnly:u,required:v,step:w,tabIndex:x,ref:z}),q&&React.createElement("span",{className:cnCheckbox("Label")},q))});
|
|
2
2
|
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","names":["React","useForkRef","cnMixFocus","cn","usePropsHandler","checkboxPropSize","checkboxPropSizeDefault","checkboxPropView","checkboxPropViewDefault","checkboxPropAlign","checkboxPropAlignDefault","COMPONENT_NAME","cnCheckbox","Checkbox","forwardRef","props","ref","checkboxRef","useRef","checked","name","size","view","align","disabled","intermediate","className","label","onChange","onFocus","onBlur","readOnly","required","step","tabIndex","inputId","inputRef","otherProps","handleChange","e"],"sources":["../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import './Checkbox.css';\n\nimport React, { ChangeEventHandler } from 'react';\n\nimport { useForkRef } from '../../hooks/useForkRef/useForkRef';\nimport { cnMixFocus } from '../../mixs/MixFocus/MixFocus';\nimport { cn } from '../../utils/bem';\nimport { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';\nimport { usePropsHandler } from '../EventInterceptor/usePropsHandler';\n\nexport const checkboxPropSize = ['m', 'l'] as const;\nexport type CheckboxPropSize = typeof checkboxPropSize[number];\nexport const checkboxPropSizeDefault: CheckboxPropSize = checkboxPropSize[0];\n\nexport const checkboxPropView = ['primary', 'ghost'] as const;\nexport type CheckboxPropView = typeof checkboxPropView[number];\nexport const checkboxPropViewDefault: CheckboxPropView = checkboxPropView[0];\n\nexport const checkboxPropAlign = ['center', 'top'] as const;\nexport type CheckboxPropAlign = typeof checkboxPropAlign[number];\nexport const checkboxPropAlignDefault: CheckboxPropAlign = checkboxPropAlign[0];\n\nexport type CheckboxPropOnChange = (object: {\n e: React.ChangeEvent<HTMLInputElement>;\n checked: boolean;\n}) => void;\n\ntype Props = {\n checked: boolean | undefined;\n size?: CheckboxPropSize;\n view?: CheckboxPropView;\n align?: CheckboxPropAlign;\n disabled?: boolean;\n intermediate?: boolean;\n label?: string;\n onChange?: CheckboxPropOnChange;\n name?: string;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n autoFocus?: boolean;\n readOnly?: boolean;\n required?: boolean;\n step?: number | string;\n tabIndex?: number;\n inputRef?: React.Ref<HTMLInputElement>;\n children?: never;\n for?: string;\n inputId?: string;\n};\n\nexport type CheckboxProps = PropsWithHTMLAttributes<Props, HTMLLabelElement>;\n\nexport const COMPONENT_NAME = 'Checkbox' as const;\nexport const cnCheckbox = cn(COMPONENT_NAME);\n\nexport const Checkbox = React.forwardRef<HTMLLabelElement, CheckboxProps>(\n (props, ref) => {\n const checkboxRef = React.useRef<HTMLLabelElement>(null);\n\n const {\n checked = false,\n name,\n size = checkboxPropSizeDefault,\n view = checkboxPropViewDefault,\n align = checkboxPropAlignDefault,\n disabled,\n intermediate = false,\n className,\n label,\n onChange,\n onFocus,\n onBlur,\n readOnly,\n required,\n step,\n tabIndex,\n inputId,\n inputRef,\n ...otherProps\n } = usePropsHandler(COMPONENT_NAME, props, checkboxRef);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n if (onChange) {\n onChange({ e, checked: !checked });\n }\n };\n\n return (\n <label\n {...otherProps}\n className={cnCheckbox({ size, view, disabled, intermediate, align }, [\n className,\n ])}\n ref={useForkRef([ref, checkboxRef])}\n >\n <input\n type=\"checkbox\"\n name={name}\n className={cnCheckbox('Input', [cnMixFocus()])}\n checked={checked}\n id={inputId}\n disabled={disabled}\n onChange={handleChange}\n onFocus={onFocus}\n onBlur={onBlur}\n readOnly={readOnly}\n required={required}\n step={step}\n tabIndex={tabIndex}\n ref={inputRef}\n />\n {label && <span className={cnCheckbox('Label')}>{label}</span>}\n </label>\n );\n },\n);\n"],"mappings":"qRAAA,uBAEA,MAAOA,MAAP,KAA0C,OAA1C,CAEA,OAASC,UAAT,yCACA,OAASC,UAAT,oCACA,OAASC,EAAT,uBAEA,OAASC,eAAT,2CAEA,MAAO,IAAMC,iBAAgB,CAAG,CAAC,GAAD,CAAM,
|
|
1
|
+
{"version":3,"file":"Checkbox.js","names":["React","useForkRef","cnMixFocus","cn","usePropsHandler","checkboxPropSize","checkboxPropSizeDefault","checkboxPropView","checkboxPropViewDefault","checkboxPropAlign","checkboxPropAlignDefault","COMPONENT_NAME","cnCheckbox","Checkbox","forwardRef","props","ref","checkboxRef","useRef","checked","name","size","view","align","disabled","intermediate","className","label","onChange","onFocus","onBlur","readOnly","required","step","tabIndex","inputId","inputRef","otherProps","handleChange","e"],"sources":["../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import './Checkbox.css';\n\nimport React, { ChangeEventHandler } from 'react';\n\nimport { useForkRef } from '../../hooks/useForkRef/useForkRef';\nimport { cnMixFocus } from '../../mixs/MixFocus/MixFocus';\nimport { cn } from '../../utils/bem';\nimport { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';\nimport { usePropsHandler } from '../EventInterceptor/usePropsHandler';\n\nexport const checkboxPropSize = ['m', 'xs', 's', 'l'] as const;\nexport type CheckboxPropSize = typeof checkboxPropSize[number];\nexport const checkboxPropSizeDefault: CheckboxPropSize = checkboxPropSize[0];\n\nexport const checkboxPropView = ['primary', 'ghost'] as const;\nexport type CheckboxPropView = typeof checkboxPropView[number];\nexport const checkboxPropViewDefault: CheckboxPropView = checkboxPropView[0];\n\nexport const checkboxPropAlign = ['center', 'top'] as const;\nexport type CheckboxPropAlign = typeof checkboxPropAlign[number];\nexport const checkboxPropAlignDefault: CheckboxPropAlign = checkboxPropAlign[0];\n\nexport type CheckboxPropOnChange = (object: {\n e: React.ChangeEvent<HTMLInputElement>;\n checked: boolean;\n}) => void;\n\ntype Props = {\n checked: boolean | undefined;\n size?: CheckboxPropSize;\n view?: CheckboxPropView;\n align?: CheckboxPropAlign;\n disabled?: boolean;\n intermediate?: boolean;\n label?: string;\n onChange?: CheckboxPropOnChange;\n name?: string;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n autoFocus?: boolean;\n readOnly?: boolean;\n required?: boolean;\n step?: number | string;\n tabIndex?: number;\n inputRef?: React.Ref<HTMLInputElement>;\n children?: never;\n for?: string;\n inputId?: string;\n};\n\nexport type CheckboxProps = PropsWithHTMLAttributes<Props, HTMLLabelElement>;\n\nexport const COMPONENT_NAME = 'Checkbox' as const;\nexport const cnCheckbox = cn(COMPONENT_NAME);\n\nexport const Checkbox = React.forwardRef<HTMLLabelElement, CheckboxProps>(\n (props, ref) => {\n const checkboxRef = React.useRef<HTMLLabelElement>(null);\n\n const {\n checked = false,\n name,\n size = checkboxPropSizeDefault,\n view = checkboxPropViewDefault,\n align = checkboxPropAlignDefault,\n disabled,\n intermediate = false,\n className,\n label,\n onChange,\n onFocus,\n onBlur,\n readOnly,\n required,\n step,\n tabIndex,\n inputId,\n inputRef,\n ...otherProps\n } = usePropsHandler(COMPONENT_NAME, props, checkboxRef);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n if (onChange) {\n onChange({ e, checked: !checked });\n }\n };\n\n return (\n <label\n {...otherProps}\n className={cnCheckbox({ size, view, disabled, intermediate, align }, [\n className,\n ])}\n ref={useForkRef([ref, checkboxRef])}\n >\n <input\n type=\"checkbox\"\n name={name}\n className={cnCheckbox('Input', [cnMixFocus()])}\n checked={checked}\n id={inputId}\n disabled={disabled}\n onChange={handleChange}\n onFocus={onFocus}\n onBlur={onBlur}\n readOnly={readOnly}\n required={required}\n step={step}\n tabIndex={tabIndex}\n ref={inputRef}\n />\n {label && <span className={cnCheckbox('Label')}>{label}</span>}\n </label>\n );\n },\n);\n"],"mappings":"qRAAA,uBAEA,MAAOA,MAAP,KAA0C,OAA1C,CAEA,OAASC,UAAT,yCACA,OAASC,UAAT,oCACA,OAASC,EAAT,uBAEA,OAASC,eAAT,2CAEA,MAAO,IAAMC,iBAAgB,CAAG,CAAC,GAAD,CAAM,IAAN,CAAY,GAAZ,CAAiB,GAAjB,CAAzB,CAEP,MAAO,IAAMC,wBAAyC,CAAGD,gBAAgB,CAAC,CAAD,CAAlE,CAEP,MAAO,IAAME,iBAAgB,CAAG,CAAC,SAAD,CAAY,OAAZ,CAAzB,CAEP,MAAO,IAAMC,wBAAyC,CAAGD,gBAAgB,CAAC,CAAD,CAAlE,CAEP,MAAO,IAAME,kBAAiB,CAAG,CAAC,QAAD,CAAW,KAAX,CAA1B,CAEP,MAAO,IAAMC,yBAA2C,CAAGD,iBAAiB,CAAC,CAAD,CAArE,CAgCP,MAAO,IAAME,eAAc,CAAG,UAAvB,CACP,MAAO,IAAMC,WAAU,CAAGT,EAAE,YAArB,CAEP,MAAO,IAAMU,SAAQ,CAAGb,KAAK,CAACc,UAAN,CACtB,SAACC,CAAD,CAAQC,CAAR,CAAgB,IACRC,EAAW,CAAGjB,KAAK,CAACkB,MAAN,CAA+B,IAA/B,CADN,GAuBVd,eAAe,CAACO,cAAD,CAAiBI,CAAjB,CAAwBE,CAAxB,CAvBL,KAIZE,OAJY,CAIZA,CAJY,eAKZC,CALY,GAKZA,IALY,KAMZC,IANY,CAMZA,CANY,YAMLf,uBANK,OAOZgB,IAPY,CAOZA,CAPY,YAOLd,uBAPK,OAQZe,KARY,CAQZA,CARY,YAQJb,wBARI,GASZc,CATY,GASZA,QATY,KAUZC,YAVY,CAWZC,CAXY,GAWZA,SAXY,CAYZC,CAZY,GAYZA,KAZY,CAaZC,CAbY,GAaZA,QAbY,CAcZC,CAdY,GAcZA,OAdY,CAeZC,CAfY,GAeZA,MAfY,CAgBZC,CAhBY,GAgBZA,QAhBY,CAiBZC,CAjBY,GAiBZA,QAjBY,CAkBZC,CAlBY,GAkBZA,IAlBY,CAmBZC,CAnBY,GAmBZA,QAnBY,CAoBZC,CApBY,GAoBZA,OApBY,CAqBZC,CArBY,GAqBZA,QArBY,CAsBTC,CAtBS,uCA+Bd,MACE,8CACMA,CADN,EAEE,SAAS,CAAEzB,UAAU,CAAC,CAAES,IAAI,CAAJA,CAAF,CAAQC,IAAI,CAAJA,CAAR,CAAcE,QAAQ,CAARA,CAAd,CAAwBC,YAAY,cAApC,CAAsCF,KAAK,CAALA,CAAtC,CAAD,CAAgD,CACnEG,CADmE,CAAhD,CAFvB,CAKE,GAAG,CAAEzB,UAAU,CAAC,CAACe,CAAD,CAAMC,CAAN,CAAD,CALjB,GAOE,6BACE,IAAI,CAAC,UADP,CAEE,IAAI,CAAEG,CAFR,CAGE,SAAS,CAAER,UAAU,CAAC,OAAD,CAAU,CAACV,UAAU,EAAX,CAAV,CAHvB,CAIE,OAAO,CAAEiB,CAJX,CAKE,EAAE,CAAEgB,CALN,CAME,QAAQ,CAAEX,CANZ,CAOE,QAAQ,CArB6C,QAArDc,aAAqD,CAACC,CAAD,CAAO,CAC5DX,CAD4D,EAE9DA,CAAQ,CAAC,CAAEW,CAAC,CAADA,CAAF,CAAKpB,OAAO,CAAE,CAACA,CAAf,CAAD,CAEX,CAUG,CAQE,OAAO,CAAEU,CARX,CASE,MAAM,CAAEC,CATV,CAUE,QAAQ,CAAEC,CAVZ,CAWE,QAAQ,CAAEC,CAXZ,CAYE,IAAI,CAAEC,CAZR,CAaE,QAAQ,CAAEC,CAbZ,CAcE,GAAG,CAAEE,CAdP,EAPF,CAuBGT,CAAK,EAAI,4BAAM,SAAS,CAAEf,UAAU,CAAC,OAAD,CAA3B,EAAuCe,CAAvC,CAvBZ,CA0BH,CA3DqB,CAAjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.CheckboxGroup{display:flex}.CheckboxGroup_direction_column{flex-direction:column}.CheckboxGroup_direction_column .CheckboxGroup-Item:not(:last-child){margin-bottom:var(--offset)}.CheckboxGroup_direction_row{flex-direction:row}.CheckboxGroup_direction_row .CheckboxGroup-Item:not(:last-child){margin-right:var(--offset)}.CheckboxGroup_size_m{--offset:var(--space-xs)}.CheckboxGroup_size_l{--offset:var(--space-s)}
|
|
1
|
+
.CheckboxGroup{display:flex}.CheckboxGroup_direction_column{flex-direction:column}.CheckboxGroup_direction_column .CheckboxGroup-Item:not(:last-child){margin-bottom:var(--offset)}.CheckboxGroup_direction_row{flex-direction:row}.CheckboxGroup_direction_row .CheckboxGroup-Item:not(:last-child){margin-right:var(--offset)}.CheckboxGroup_size_xs{--offset:var(--space-3xs)}.CheckboxGroup_size_s{--offset:var(--space-2xs)}.CheckboxGroup_size_m{--offset:var(--space-xs)}.CheckboxGroup_size_l{--offset:var(--space-s)}
|
|
@@ -11,7 +11,7 @@ export declare const withDefaultGetters: (props: CheckboxGroupProps) => {
|
|
|
11
11
|
}) => void;
|
|
12
12
|
name?: string | undefined;
|
|
13
13
|
direction?: "row" | "column" | undefined;
|
|
14
|
-
size?: "m" | "l" | undefined;
|
|
14
|
+
size?: "m" | "s" | "xs" | "l" | undefined;
|
|
15
15
|
view?: "primary" | "ghost" | undefined;
|
|
16
16
|
disabled?: boolean | undefined;
|
|
17
17
|
className?: string | undefined;
|
|
@@ -7,7 +7,7 @@ export declare type CheckboxGroupDefaultItem = {
|
|
|
7
7
|
export declare const checkboxGroupDirections: readonly ["column", "row"];
|
|
8
8
|
export declare type CheckboxGroupDirection = typeof checkboxGroupDirections[number];
|
|
9
9
|
export declare const checkboxGroupDefaultDirection: CheckboxGroupDirection;
|
|
10
|
-
export declare const checkboxGroupSizes: readonly ["m", "l"];
|
|
10
|
+
export declare const checkboxGroupSizes: readonly ["m", "xs", "s", "l"];
|
|
11
11
|
export declare type CheckboxGroupPropSize = typeof checkboxGroupSizes[number];
|
|
12
12
|
export declare const checkboxGroupDefaultSize: CheckboxGroupPropSize;
|
|
13
13
|
export declare const checkboxGroupViews: readonly ["primary", "ghost"];
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export var checkboxGroupDirections=["column","row"];export var checkboxGroupDefaultDirection=checkboxGroupDirections[0];export var checkboxGroupSizes=["m","l"];export var checkboxGroupDefaultSize=checkboxGroupSizes[0];export var checkboxGroupViews=["primary","ghost"];export var checkboxGroupDefaultView=checkboxGroupViews[0];
|
|
1
|
+
export var checkboxGroupDirections=["column","row"];export var checkboxGroupDefaultDirection=checkboxGroupDirections[0];export var checkboxGroupSizes=["m","xs","s","l"];export var checkboxGroupDefaultSize=checkboxGroupSizes[0];export var checkboxGroupViews=["primary","ghost"];export var checkboxGroupDefaultView=checkboxGroupViews[0];
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","names":["checkboxGroupDirections","checkboxGroupDefaultDirection","checkboxGroupSizes","checkboxGroupDefaultSize","checkboxGroupViews","checkboxGroupDefaultView"],"sources":["../../../../../src/components/CheckboxGroup/types.ts"],"sourcesContent":["import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';\n\nexport type CheckboxGroupDefaultItem = {\n label: string;\n disabled?: boolean;\n};\n\nexport const checkboxGroupDirections = ['column', 'row'] as const;\nexport type CheckboxGroupDirection = typeof checkboxGroupDirections[number];\nexport const checkboxGroupDefaultDirection: CheckboxGroupDirection =\n checkboxGroupDirections[0];\n\nexport const checkboxGroupSizes = ['m', 'l'] as const;\nexport type CheckboxGroupPropSize = typeof checkboxGroupSizes[number];\nexport const checkboxGroupDefaultSize: CheckboxGroupPropSize =\n checkboxGroupSizes[0];\n\nexport const checkboxGroupViews = ['primary', 'ghost'] as const;\nexport type CheckboxGroupPropView = typeof checkboxGroupViews[number];\nexport const checkboxGroupDefaultView: CheckboxGroupPropView =\n checkboxGroupViews[0];\n\nexport type CheckboxGroupPropGetItemLabel<ITEM> = (item: ITEM) => string;\nexport type CheckboxGroupPropGetItemDisabled<ITEM> = (\n item: ITEM,\n) => boolean | undefined;\n\nexport type CheckboxGroupProps<ITEM = CheckboxGroupDefaultItem> =\n PropsWithHTMLAttributesAndRef<\n {\n value?: ITEM[] | null;\n items: ITEM[];\n getItemLabel?: CheckboxGroupPropGetItemLabel<ITEM>;\n getItemDisabled?: CheckboxGroupPropGetItemDisabled<ITEM>;\n onChange: (props: {\n e: React.ChangeEvent<HTMLInputElement>;\n value: ITEM[] | null;\n }) => void;\n name?: string;\n direction?: CheckboxGroupDirection;\n size?: CheckboxGroupPropSize;\n view?: CheckboxGroupPropView;\n disabled?: boolean;\n className?: string;\n },\n HTMLDivElement\n > &\n (ITEM extends { label: CheckboxGroupDefaultItem['label'] }\n ? {}\n : {\n getItemLabel: CheckboxGroupPropGetItemLabel<ITEM>;\n });\n\nexport type CheckboxGroupComponent = <ITEM = CheckboxGroupDefaultItem>(\n props: CheckboxGroupProps<ITEM>,\n) => React.ReactElement | null;\n"],"mappings":"AAOA,MAAO,IAAMA,wBAAuB,CAAG,CAAC,QAAD,CAAW,KAAX,CAAhC,CAEP,MAAO,IAAMC,8BAAqD,CAChED,uBAAuB,CAAC,CAAD,CADlB,CAGP,MAAO,IAAME,mBAAkB,CAAG,CAAC,GAAD,CAAM,
|
|
1
|
+
{"version":3,"file":"types.js","names":["checkboxGroupDirections","checkboxGroupDefaultDirection","checkboxGroupSizes","checkboxGroupDefaultSize","checkboxGroupViews","checkboxGroupDefaultView"],"sources":["../../../../../src/components/CheckboxGroup/types.ts"],"sourcesContent":["import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';\n\nexport type CheckboxGroupDefaultItem = {\n label: string;\n disabled?: boolean;\n};\n\nexport const checkboxGroupDirections = ['column', 'row'] as const;\nexport type CheckboxGroupDirection = typeof checkboxGroupDirections[number];\nexport const checkboxGroupDefaultDirection: CheckboxGroupDirection =\n checkboxGroupDirections[0];\n\nexport const checkboxGroupSizes = ['m', 'xs', 's', 'l'] as const;\nexport type CheckboxGroupPropSize = typeof checkboxGroupSizes[number];\nexport const checkboxGroupDefaultSize: CheckboxGroupPropSize =\n checkboxGroupSizes[0];\n\nexport const checkboxGroupViews = ['primary', 'ghost'] as const;\nexport type CheckboxGroupPropView = typeof checkboxGroupViews[number];\nexport const checkboxGroupDefaultView: CheckboxGroupPropView =\n checkboxGroupViews[0];\n\nexport type CheckboxGroupPropGetItemLabel<ITEM> = (item: ITEM) => string;\nexport type CheckboxGroupPropGetItemDisabled<ITEM> = (\n item: ITEM,\n) => boolean | undefined;\n\nexport type CheckboxGroupProps<ITEM = CheckboxGroupDefaultItem> =\n PropsWithHTMLAttributesAndRef<\n {\n value?: ITEM[] | null;\n items: ITEM[];\n getItemLabel?: CheckboxGroupPropGetItemLabel<ITEM>;\n getItemDisabled?: CheckboxGroupPropGetItemDisabled<ITEM>;\n onChange: (props: {\n e: React.ChangeEvent<HTMLInputElement>;\n value: ITEM[] | null;\n }) => void;\n name?: string;\n direction?: CheckboxGroupDirection;\n size?: CheckboxGroupPropSize;\n view?: CheckboxGroupPropView;\n disabled?: boolean;\n className?: string;\n },\n HTMLDivElement\n > &\n (ITEM extends { label: CheckboxGroupDefaultItem['label'] }\n ? {}\n : {\n getItemLabel: CheckboxGroupPropGetItemLabel<ITEM>;\n });\n\nexport type CheckboxGroupComponent = <ITEM = CheckboxGroupDefaultItem>(\n props: CheckboxGroupProps<ITEM>,\n) => React.ReactElement | null;\n"],"mappings":"AAOA,MAAO,IAAMA,wBAAuB,CAAG,CAAC,QAAD,CAAW,KAAX,CAAhC,CAEP,MAAO,IAAMC,8BAAqD,CAChED,uBAAuB,CAAC,CAAD,CADlB,CAGP,MAAO,IAAME,mBAAkB,CAAG,CAAC,GAAD,CAAM,IAAN,CAAY,GAAZ,CAAiB,GAAjB,CAA3B,CAEP,MAAO,IAAMC,yBAA+C,CAC1DD,kBAAkB,CAAC,CAAD,CADb,CAGP,MAAO,IAAME,mBAAkB,CAAG,CAAC,SAAD,CAAY,OAAZ,CAA3B,CAEP,MAAO,IAAMC,yBAA+C,CAC1DD,kBAAkB,CAAC,CAAD,CADb"}
|
package/__internal__/src/components/EventInterceptor/propsHandlers/useCheckboxEventsHandler.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { EventInterceptorHandler } from '../EventInterceptor';
|
|
3
3
|
export declare const useCheckboxEventsHandler: <P extends {
|
|
4
4
|
checked: boolean | undefined;
|
|
5
|
-
size?: "m" | "l" | undefined;
|
|
5
|
+
size?: "m" | "s" | "xs" | "l" | undefined;
|
|
6
6
|
view?: "primary" | "ghost" | undefined;
|
|
7
7
|
align?: "center" | "top" | undefined;
|
|
8
8
|
disabled?: boolean | undefined;
|
|
@@ -23,7 +23,7 @@ export declare const useCheckboxEventsHandler: <P extends {
|
|
|
23
23
|
inputId?: string | undefined;
|
|
24
24
|
} & Omit<React.HTMLAttributes<HTMLLabelElement>, "css" | keyof {
|
|
25
25
|
checked: boolean | undefined;
|
|
26
|
-
size?: "m" | "l" | undefined;
|
|
26
|
+
size?: "m" | "s" | "xs" | "l" | undefined;
|
|
27
27
|
view?: "primary" | "ghost" | undefined;
|
|
28
28
|
align?: "center" | "top" | undefined;
|
|
29
29
|
disabled?: boolean | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Skeleton{--loader-width:100px;-webkit-animation:Skeleton-Animation
|
|
1
|
+
.Skeleton{--loader-width:100px;-webkit-animation:Skeleton-Animation 1.5s linear infinite;animation:Skeleton-Animation 1.5s linear infinite;background-attachment:fixed;background-color:var(--color-bg-system);background-image:linear-gradient(to right,transparent 0,var(--color-bg-stripe) calc(var(--loader-width)*.2),var(--color-bg-ghost) calc(var(--loader-width)*.6),transparent var(--loader-width));background-repeat:no-repeat;box-sizing:border-box}@media (min-width:720px){.Skeleton{-webkit-animation-duration:2s;animation-duration:2s}}@media (min-width:1280px){.Skeleton{-webkit-animation-duration:2.5s;animation-duration:2.5s}}@-webkit-keyframes Skeleton-Animation{0%{background-position:calc(var(--loader-width)*-1) 0}75%,to{background-position:100vw 0}}@keyframes Skeleton-Animation{0%{background-position:calc(var(--loader-width)*-1) 0}75%,to{background-position:100vw 0}}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React from"react";import{cnSkeleton}from"../Skeleton";export var SkeletonBrick=function(a){var b=a.className,c=a.width,d=void 0===c?"100%":c,e=a.height;return React.createElement("div",{className:cnSkeleton(
|
|
1
|
+
import React from"react";import{cnSkeleton}from"../Skeleton";export var SkeletonBrick=function(a){var b=a.className,c=a.width,d=void 0===c?"100%":c,e=a.height;return React.createElement("div",{className:cnSkeleton(null,[b]),style:{width:d,height:e}})};
|
|
2
2
|
//# sourceMappingURL=SkeletonBrick.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonBrick.js","names":["React","cnSkeleton","SkeletonBrick","className","width","height"],"sources":["../../../../../../src/components/Skeleton/SkeletonBrick/SkeletonBrick.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { cnSkeleton } from '../Skeleton';\n\ntype SkeletonBrickProps = {\n className?: string;\n width?: CSSProperties['width'];\n height: CSSProperties['height'];\n};\n\nexport const SkeletonBrick: React.FC<SkeletonBrickProps> = ({\n className,\n width = '100%',\n height,\n}) => <div className={cnSkeleton(
|
|
1
|
+
{"version":3,"file":"SkeletonBrick.js","names":["React","cnSkeleton","SkeletonBrick","className","width","height"],"sources":["../../../../../../src/components/Skeleton/SkeletonBrick/SkeletonBrick.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { cnSkeleton } from '../Skeleton';\n\ntype SkeletonBrickProps = {\n className?: string;\n width?: CSSProperties['width'];\n height: CSSProperties['height'];\n};\n\nexport const SkeletonBrick: React.FC<SkeletonBrickProps> = ({\n className,\n width = '100%',\n height,\n}) => (\n <div className={cnSkeleton(null, [className])} style={{ width, height }} />\n);\n"],"mappings":"AAAA,MAAOA,MAAP,KAAqC,OAArC,CAEA,OAASC,UAAT,mBAQA,MAAO,IAAMC,cAA2C,CAAG,eACzDC,EADyD,GACzDA,SADyD,KAEzDC,KAFyD,CAEzDA,CAFyD,YAEjD,MAFiD,GAGzDC,CAHyD,GAGzDA,MAHyD,OAKzD,4BAAK,SAAS,CAAEJ,UAAU,CAAC,IAAD,CAAO,CAACE,CAAD,CAAP,CAA1B,CAA+C,KAAK,CAAE,CAAEC,KAAK,CAALA,CAAF,CAASC,MAAM,CAANA,CAAT,CAAtD,EALyD,CAApD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"./SkeletonCircle.css";import React from"react";import{cn}from"../../../utils/bem";import{cnSkeleton}from"../Skeleton";export var SkeletonCircle=function(a){var b=a.className,c=a.size;return React.createElement("div",{className:cnSkeletonCircle(
|
|
1
|
+
import"./SkeletonCircle.css";import React from"react";import{cn}from"../../../utils/bem";import{cnSkeleton}from"../Skeleton";var cnSkeletonCircle=cn("SkeletonCircle");export var SkeletonCircle=function(a){var b=a.className,c=a.size;return React.createElement("div",{className:cnSkeletonCircle(null,[cnSkeleton(),b]),style:{width:c,height:c}})};
|
|
2
2
|
//# sourceMappingURL=SkeletonCircle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonCircle.js","names":["React","cn","cnSkeleton","SkeletonCircle","className","size","
|
|
1
|
+
{"version":3,"file":"SkeletonCircle.js","names":["React","cn","cnSkeleton","cnSkeletonCircle","SkeletonCircle","className","size","width","height"],"sources":["../../../../../../src/components/Skeleton/SkeletonCircle/SkeletonCircle.tsx"],"sourcesContent":["import './SkeletonCircle.css';\n\nimport React, { CSSProperties } from 'react';\n\nimport { cn } from '##/utils/bem';\n\nimport { cnSkeleton } from '../Skeleton';\n\ntype SkeletonCircleProps = {\n className?: string;\n size: CSSProperties['width'] & CSSProperties['height'];\n};\n\nconst cnSkeletonCircle = cn('SkeletonCircle');\n\nexport const SkeletonCircle: React.FC<SkeletonCircleProps> = ({\n className,\n size,\n}) => (\n <div\n className={cnSkeletonCircle(null, [cnSkeleton(), className])}\n style={{ width: size, height: size }}\n />\n);\n"],"mappings":"AAAA,6BAEA,MAAOA,MAAP,KAAqC,OAArC,CAEA,OAASC,EAAT,0BAEA,OAASC,UAAT,mBAOA,GAAMC,iBAAgB,CAAGF,EAAE,CAAC,gBAAD,CAA3B,CAEA,MAAO,IAAMG,eAA6C,CAAG,eAC3DC,EAD2D,GAC3DA,SAD2D,CAE3DC,CAF2D,GAE3DA,IAF2D,OAI3D,4BACE,SAAS,CAAEH,gBAAgB,CAAC,IAAD,CAAO,CAACD,UAAU,EAAX,CAAeG,CAAf,CAAP,CAD7B,CAEE,KAAK,CAAE,CAAEE,KAAK,CAAED,CAAT,CAAeE,MAAM,CAAEF,CAAvB,CAFT,EAJ2D,CAAtD"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './SkeletonText.css';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { TextPropLineHeight, TextPropSize } from
|
|
3
|
+
import { TextPropLineHeight, TextPropSize } from "../../Text";
|
|
4
4
|
import { SkeletonBrick } from '../Skeleton';
|
|
5
5
|
declare type SkeletonTextProps = {
|
|
6
6
|
className?: string;
|
|
@@ -8,6 +8,6 @@ declare type SkeletonTextProps = {
|
|
|
8
8
|
fontSize?: TextPropSize;
|
|
9
9
|
lineHeight?: TextPropLineHeight;
|
|
10
10
|
};
|
|
11
|
-
export declare const SkeletonText: React.FC<SkeletonTextProps>;
|
|
12
11
|
export declare const getRowWidth: (idx: number, total: number) => React.ComponentProps<typeof SkeletonBrick>['height'];
|
|
12
|
+
export declare const SkeletonText: React.FC<SkeletonTextProps>;
|
|
13
13
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"./SkeletonText.css";import React from"react";import{
|
|
1
|
+
import"./SkeletonText.css";import React from"react";import{textPropLineHeightDefault,textPropSizeDefault}from"../../Text";import{cn}from"../../../utils/bem";import{SkeletonBrick}from"../Skeleton";var cnSkeletonText=cn("SkeletonText");export var getRowWidth=function(a,b){if(a===b-1)return"50%";switch(a%3){case 0:return"100%";case 1:return"85%";case 2:return"93%";}return"100%"};export var SkeletonText=function(a){var b=a.className,c=a.rows,d=a.fontSize,e=void 0===d?textPropSizeDefault:d,f=a.lineHeight,g=void 0===f?textPropLineHeightDefault:f,h="var(--size-text-".concat(e,")"),i="var(--line-height-text-".concat(g,")");return React.createElement("div",{className:cnSkeletonText(null,[b]),key:c},Array(c).fill(null).map(function(a,b){return React.createElement("div",{key:b,className:cnSkeletonText("Row"),style:{fontSize:h,height:i}},React.createElement(SkeletonBrick,{width:getRowWidth(b,c),height:h}))}))};
|
|
2
2
|
//# sourceMappingURL=SkeletonText.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonText.js","names":["React","
|
|
1
|
+
{"version":3,"file":"SkeletonText.js","names":["React","textPropLineHeightDefault","textPropSizeDefault","cn","SkeletonBrick","cnSkeletonText","getRowWidth","idx","total","SkeletonText","className","rows","fontSize","lineHeight","varFontSize","varLineHeight","Array","fill","map","_v","height"],"sources":["../../../../../../src/components/Skeleton/SkeletonText/SkeletonText.tsx"],"sourcesContent":["import './SkeletonText.css';\n\nimport React from 'react';\n\nimport {\n TextPropLineHeight,\n textPropLineHeightDefault,\n TextPropSize,\n textPropSizeDefault,\n} from '##/components/Text';\nimport { cn } from '##/utils/bem';\n\nimport { SkeletonBrick } from '../Skeleton';\n\ntype SkeletonTextProps = {\n className?: string;\n rows: number;\n fontSize?: TextPropSize;\n lineHeight?: TextPropLineHeight;\n};\n\nconst cnSkeletonText = cn('SkeletonText');\n\nexport const getRowWidth = (\n idx: number,\n total: number,\n): React.ComponentProps<typeof SkeletonBrick>['height'] => {\n if (idx === total - 1) {\n return '50%';\n }\n\n switch (idx % 3) {\n case 0:\n return '100%';\n case 1:\n return '85%';\n case 2:\n return '93%';\n }\n\n return '100%';\n};\n\nexport const SkeletonText: React.FC<SkeletonTextProps> = ({\n className,\n rows,\n fontSize = textPropSizeDefault,\n lineHeight = textPropLineHeightDefault,\n}) => {\n const varFontSize = `var(--size-text-${fontSize})`;\n const varLineHeight = `var(--line-height-text-${lineHeight})`;\n return (\n <div\n className={cnSkeletonText(null, [className])}\n key={\n /* форсируем полный ререндер компонента при смене количества строк,\n чтобы анимация у всех строк запустилась заново */\n rows\n }\n >\n {new Array(rows).fill(null).map((_v, idx) => (\n <div\n key={idx}\n className={cnSkeletonText('Row')}\n style={{ fontSize: varFontSize, height: varLineHeight }}\n >\n <SkeletonBrick width={getRowWidth(idx, rows)} height={varFontSize} />\n </div>\n ))}\n </div>\n );\n};\n"],"mappings":"AAAA,2BAEA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAEEC,yBAFF,CAIEC,mBAJF,kBAMA,OAASC,EAAT,0BAEA,OAASC,aAAT,mBASA,GAAMC,eAAc,CAAGF,EAAE,CAAC,cAAD,CAAzB,CAEA,MAAO,IAAMG,YAAW,CAAG,SACzBC,CADyB,CAEzBC,CAFyB,CAGgC,CACzD,GAAID,CAAG,GAAKC,CAAK,CAAG,CAApB,CACE,MAAO,KAAP,CAGF,OAAQD,CAAG,CAAG,CAAd,EACE,IAAK,EAAL,CACE,MAAO,MAAP,CACF,IAAK,EAAL,CACE,MAAO,KAAP,CACF,IAAK,EAAL,CACE,MAAO,KAAP,CANJ,CASA,MAAO,MACR,CAlBM,CAoBP,MAAO,IAAME,aAAyC,CAAG,WAKnD,IAJJC,EAII,GAJJA,SAII,CAHJC,CAGI,GAHJA,IAGI,KAFJC,QAEI,CAFJA,CAEI,YAFOV,mBAEP,OADJW,UACI,CADJA,CACI,YADSZ,yBACT,GACEa,CAAW,2BAAsBF,CAAtB,KADb,CAEEG,CAAa,kCAA6BF,CAA7B,KAFf,CAGJ,MACE,4BACE,SAAS,CAAER,cAAc,CAAC,IAAD,CAAO,CAACK,CAAD,CAAP,CAD3B,CAEE,GAAG,CAGDC,CALJ,EAQOK,KAAJ,CAAUL,CAAV,EAAgBM,IAAhB,CAAqB,IAArB,EAA2BC,GAA3B,CAA+B,SAACC,CAAD,CAAKZ,CAAL,QAC9B,4BACE,GAAG,CAAEA,CADP,CAEE,SAAS,CAAEF,cAAc,CAAC,KAAD,CAF3B,CAGE,KAAK,CAAE,CAAEO,QAAQ,CAAEE,CAAZ,CAAyBM,MAAM,CAAEL,CAAjC,CAHT,EAKE,oBAAC,aAAD,EAAe,KAAK,CAAET,WAAW,CAACC,CAAD,CAAMI,CAAN,CAAjC,CAA8C,MAAM,CAAEG,CAAtD,EALF,CAD8B,CAA/B,CARH,CAmBH,CA5BM"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./TableHeader.css";import React from"react";import{cn}from"../../../utils/bem";import{Button}from"../../Button/Button";import{TableCell}from"../Cell/TableCell";import{getOptionsForFilters}from"../filtering";import{TableFilterTooltip}from"../FilterTooltip/TableFilterTooltip";var cnTableHeader=cn("TableHeader");export var levelTypes=["high","low","default"];export var TableHeader=function(a){var b=a.isStickyHeader,c=a.headersWithMetaData,d=a.headerRowsHeights,f=a.headerRowsRefs,g=a.getStickyLeftOffset,h=a.stickyColumnsGrid,i=a.showVerticalCellShadow,j=a.headerVerticalAlign,k=a.getSortIcon,l=a.handleSortClick,m=a.handleFilterTogglerClick,n=a.handleCellClick,o=a.handleTooltipSave,p=a.filters,q=a.visibleFilter,r=a.selectedFilters,s=a.showHorizontalCellShadow,t=a.borderBetweenColumns,u=d.reduce(function(c,a){return c+a},0),v={"--table-header-height":"".concat(u,"px")},w=function(a){var b;return 1<=+a.position.colSpan?"high":null!==(b=a.position)&&void 0!==b&&b.smallTextSize?"low":"default"},x=function(a){var b=[],d=function(a){a.columns?a.columns.forEach(function(a){return d(c.find(function(b){return b.title===a.title}))}):b.push(a)};return d(a),b.some(function(a){return a.isResized})},y=function(a){var b,c,d,e;if(!p||!a.accessor)return null;var f=p.find(function(b){var c=b.field;return c===a.accessor}),g=null===f||void 0===f||null===(b=f.component)||void 0===b?void 0:b.name,h=null!==(c=null===f||void 0===f||null===(d=f.component)||void 0===d?void 0:d.props)&&void 0!==c?c:{},i=m(a.accessor),j=null===f||void 0===f?void 0:f.id;return a.filterable?React.createElement(TableFilterTooltip,{field:a.accessor,isOpened:q===a.accessor,options:getOptionsForFilters(p,a.accessor),values:r[a.accessor].selected||[],onChange:o,onToggle:m(a.accessor),className:cnTableHeader("Icon",{type:"filter"})},g&&React.createElement(g,Object.assign({},h,{onConfirm:function handleFilterSave(b){j&&o(a.accessor,[j],b),i()},filterValue:null===(e=r[a.accessor])||void 0===e?void 0:e.value,onCancel:m(a.accessor)}))):null},z=function(a){return a.control?React.createElement("div",{className:cnTableHeader("\u0421ontrol")},a.control({column:a})):null};return React.createElement(React.Fragment,null,React.createElement("div",{className:cnTableHeader("Row",{withVerticalBorder:t})},c.map(function(a,m){var o,p,q,r={};return a.position.colSpan&&(
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./TableHeader.css";import React from"react";import{cn}from"../../../utils/bem";import{Button}from"../../Button/Button";import{TableCell}from"../Cell/TableCell";import{getOptionsForFilters}from"../filtering";import{TableFilterTooltip}from"../FilterTooltip/TableFilterTooltip";var cnTableHeader=cn("TableHeader");export var levelTypes=["high","low","default"];export var TableHeader=function(a){var b=a.isStickyHeader,c=a.headersWithMetaData,d=a.headerRowsHeights,f=a.headerRowsRefs,g=a.getStickyLeftOffset,h=a.stickyColumnsGrid,i=a.showVerticalCellShadow,j=a.headerVerticalAlign,k=a.getSortIcon,l=a.handleSortClick,m=a.handleFilterTogglerClick,n=a.handleCellClick,o=a.handleTooltipSave,p=a.filters,q=a.visibleFilter,r=a.selectedFilters,s=a.showHorizontalCellShadow,t=a.borderBetweenColumns,u=d.reduce(function(c,a){return c+a},0),v={"--table-header-height":"".concat(u,"px")},w=function(a){var b;return 1<=+a.position.colSpan?"high":null!==(b=a.position)&&void 0!==b&&b.smallTextSize?"low":"default"},x=function(a){var b=[],d=function(a){a.columns?a.columns.forEach(function(a){return d(c.find(function(b){return b.title===a.title}))}):b.push(a)};return d(a),b.some(function(a){return a.isResized})},y=function(a){var b,c,d,e;if(!p||!a.accessor)return null;var f=p.find(function(b){var c=b.field;return c===a.accessor}),g=null===f||void 0===f||null===(b=f.component)||void 0===b?void 0:b.name,h=null!==(c=null===f||void 0===f||null===(d=f.component)||void 0===d?void 0:d.props)&&void 0!==c?c:{},i=m(a.accessor),j=null===f||void 0===f?void 0:f.id;return a.filterable?React.createElement(TableFilterTooltip,{field:a.accessor,isOpened:q===a.accessor,options:getOptionsForFilters(p,a.accessor),values:r[a.accessor].selected||[],onChange:o,onToggle:m(a.accessor),className:cnTableHeader("Icon",{type:"filter"})},g&&React.createElement(g,Object.assign({},h,{onConfirm:function handleFilterSave(b){j&&o(a.accessor,[j],b),i()},filterValue:null===(e=r[a.accessor])||void 0===e?void 0:e.value,onCancel:m(a.accessor)}))):null},z=function(a){return a.control?React.createElement("div",{className:cnTableHeader("\u0421ontrol")},a.control({column:a})):null};return React.createElement(React.Fragment,null,React.createElement("div",{className:cnTableHeader("Row",{withVerticalBorder:t})},c.map(function(a,m){var o,p,q,r,s={};return a.position.colSpan&&(s.gridColumnEnd="span ".concat(a.position.colSpan)),a.position.rowSpan&&(s.gridRowEnd="span ".concat(a.position.rowSpan)),b&&(s.top=d.slice(0,a.position.level).reduce(function(c,a){return c+a},0)),React.createElement(TableCell,{type:"header",key:m,ref:function ref(a){f.current[m]=a},style:_objectSpread(_objectSpread({},s),{},{left:g(a.position.gridIndex,a.position.topHeaderGridIndex)}),isSticky:b,isResized:x(a),column:a,verticalAlign:j,onContextMenu:function onContextMenu(a){return n({e:a,type:"contextMenu",columnIdx:m,ref:{current:f.current[m]}})},onClick:function onClick(a){return n({e:a,type:"click",columnIdx:m,ref:{current:f.current[m]}})},className:cnTableHeader("Cell",{isFirstColumn:null===(o=a.position)||void 0===o?void 0:o.isFirst,isFirstRow:0===a.position.level,isLastInColumn:(null===(p=a.position)||void 0===p?void 0:p.topHeaderGridIndex)!==(null===(q=c[m+1])||void 0===q||null===(r=q.position)||void 0===r?void 0:r.topHeaderGridIndex),level:w(a)}),showVerticalShadow:i&&a.position.gridIndex+((null===a||void 0===a?void 0:a.position.colSpan)||1)===h},a.title,React.createElement("div",{className:cnTableHeader("Buttons",{isSortingActive:a.isSortingActive,isFilterActive:a.isFilterActive,verticalAlign:j})},a.sortable&&React.createElement(Button,{size:"xs",iconSize:"s",view:"clear",onlyIcon:!0,onClick:function onClick(){return l(a)},iconLeft:k(a),className:cnTableHeader("Icon",{type:"sort"})}),y(a),z(a)))})),React.createElement("div",{className:cnTableHeader("ShadowWrapper"),style:v},React.createElement("div",{className:cnTableHeader("Shadow",{show:s&&b})})))};
|
|
2
2
|
//# sourceMappingURL=TableHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeader.js","names":["React","cn","Button","TableCell","getOptionsForFilters","TableFilterTooltip","cnTableHeader","levelTypes","TableHeader","isStickyHeader","headersWithMetaData","headerRowsHeights","headerRowsRefs","getStickyLeftOffset","stickyColumnsGrid","showVerticalCellShadow","headerVerticalAlign","getSortIcon","handleSortClick","handleFilterTogglerClick","handleCellClick","handleTooltipSave","filters","visibleFilter","selectedFilters","showHorizontalCellShadow","borderBetweenColumns","tableHeaderHeight","reduce","a","b","tableHeaderStyle","getLevelType","column","position","colSpan","smallTextSize","isColumnResized","headers","build","header","columns","forEach","col","find","head","title","push","some","isResized","getFilterPopover","accessor","curFilter","field","FilterComponent","component","name","filterComponentProps","props","onToggle","filterId","id","filterable","selected","type","handleFilterSave","filterValue","value","control","withVerticalBorder","map","columnIdx","style","gridColumnEnd","rowSpan","gridRowEnd","top","slice","level","ref","current","left","gridIndex","topHeaderGridIndex","e","isFirstColumn","isFirstRow","isLastInColumn","isSortingActive","isFilterActive","verticalAlign","sortable","show"],"sources":["../../../../../../src/components/Table/Header/TableHeader.tsx"],"sourcesContent":["import './TableHeader.css';\n\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { Button } from '../../Button/Button';\nimport { TableCell } from '../Cell/TableCell';\nimport {\n FieldSelectedValues,\n Filters,\n getOptionsForFilters,\n SelectedFilters,\n} from '../filtering';\nimport { TableFilterTooltip } from '../FilterTooltip/TableFilterTooltip';\nimport { Header } from '../helpers';\nimport {\n ColumnMetaData,\n HeaderVerticalAlign,\n onCellClick,\n TableColumn,\n TableRow,\n} from '../Table';\n\nconst cnTableHeader = cn('TableHeader');\n\ntype TableCSSCustomProperty = {\n '--table-header-height': string;\n};\n\nexport const levelTypes = ['high', 'low', 'default'] as const;\nexport type LevelType = typeof levelTypes[number];\n\ntype Props<T extends TableRow> = {\n isStickyHeader: boolean;\n headersWithMetaData: Array<Header<T> & ColumnMetaData>;\n headerRowsHeights: Array<number>;\n headerRowsRefs: React.MutableRefObject<Record<number, HTMLDivElement | null>>;\n getStickyLeftOffset: (\n columnIndex: number,\n topHeaderGridIndex: number,\n ) => number | undefined;\n stickyColumnsGrid: number;\n showVerticalCellShadow: boolean;\n headerVerticalAlign: HeaderVerticalAlign;\n getSortIcon: (column: Header<T>) => React.FC;\n handleSortClick: (column: TableColumn<T>) => void;\n handleFilterTogglerClick: (id: string) => () => void;\n handleCellClick: onCellClick;\n handleTooltipSave: (\n field: string,\n tooltipSelectedFilters: FieldSelectedValues,\n value?: unknown,\n ) => void;\n filters: Filters<T> | undefined;\n visibleFilter: string | null;\n selectedFilters: SelectedFilters;\n showHorizontalCellShadow: boolean;\n borderBetweenColumns: boolean;\n};\n\nexport const TableHeader = <T extends TableRow>({\n isStickyHeader,\n headersWithMetaData,\n headerRowsHeights,\n headerRowsRefs,\n getStickyLeftOffset,\n stickyColumnsGrid,\n showVerticalCellShadow,\n headerVerticalAlign,\n getSortIcon,\n handleSortClick,\n handleFilterTogglerClick,\n handleCellClick,\n handleTooltipSave,\n filters,\n visibleFilter,\n selectedFilters,\n showHorizontalCellShadow,\n borderBetweenColumns,\n}: Props<T>): React.ReactElement => {\n const tableHeaderHeight = headerRowsHeights.reduce(\n (a: number, b: number) => a + b,\n 0,\n );\n const tableHeaderStyle: React.CSSProperties & TableCSSCustomProperty = {\n '--table-header-height': `${tableHeaderHeight}px`,\n };\n const getLevelType = (column: Header<T> & ColumnMetaData): LevelType => {\n if (Number(column.position!.colSpan) >= 1) return 'high';\n if (column.position?.smallTextSize) return 'low';\n return 'default';\n };\n const isColumnResized = (column: Header<T> & ColumnMetaData): boolean => {\n const headers: Array<Header<T> & ColumnMetaData> = [];\n const build = (header: Header<T> & ColumnMetaData) => {\n if (!header.columns) {\n headers.push(header);\n } else {\n header.columns.forEach((col) =>\n build(\n headersWithMetaData.find(\n (head) => head.title === col.title,\n ) as Header<T> & ColumnMetaData,\n ),\n );\n }\n };\n build(column);\n return headers.some((header) => header.isResized);\n };\n\n const getFilterPopover = (\n column: Header<T> & ColumnMetaData,\n ): React.ReactNode => {\n if (!filters || !column.accessor) {\n return null;\n }\n const curFilter = filters.find(({ field }) => field === column.accessor);\n const FilterComponent = curFilter?.component?.name;\n const filterComponentProps = curFilter?.component?.props ?? {};\n const onToggle = handleFilterTogglerClick(column.accessor);\n const filterId = curFilter?.id;\n const handleFilterSave = (filterValue?: unknown) => {\n if (filterId) {\n handleTooltipSave(column.accessor!, [filterId], filterValue);\n }\n onToggle();\n };\n\n return column.filterable ? (\n <TableFilterTooltip\n field={column.accessor}\n isOpened={visibleFilter === column.accessor}\n options={getOptionsForFilters(filters, column.accessor)}\n values={selectedFilters[column.accessor].selected || []}\n onChange={handleTooltipSave}\n onToggle={handleFilterTogglerClick(column.accessor)}\n className={cnTableHeader('Icon', { type: 'filter' })}\n >\n {FilterComponent && (\n <FilterComponent\n {...filterComponentProps}\n onConfirm={handleFilterSave}\n filterValue={selectedFilters[column.accessor]?.value}\n onCancel={handleFilterTogglerClick(column.accessor)}\n />\n )}\n </TableFilterTooltip>\n ) : null;\n };\n\n const control = (column: Header<T> & ColumnMetaData): React.ReactNode => {\n if (column.control) {\n return (\n <div className={cnTableHeader('Сontrol')}>\n {column.control({ column })}\n </div>\n );\n }\n\n return null;\n };\n\n return (\n <>\n <div\n className={cnTableHeader('Row', {\n withVerticalBorder: borderBetweenColumns,\n })}\n >\n {headersWithMetaData.map(\n (column: Header<T> & ColumnMetaData, columnIdx: number) => {\n const style: React.CSSProperties = {};\n if (column.position!.colSpan) {\n style.gridColumnEnd = `span ${column.position!.colSpan}`;\n }\n if (column.position!.rowSpan) {\n style.gridRowEnd = `span ${column.position!.rowSpan}`;\n }\n if (isStickyHeader) {\n style.top = headerRowsHeights\n .slice(0, column.position!.level)\n .reduce((a: number, b: number) => a + b, 0);\n }\n return (\n <TableCell\n type=\"header\"\n key={columnIdx}\n ref={(ref: HTMLDivElement | null): void => {\n /* eslint-disable-next-line no-param-reassign */\n headerRowsRefs.current[columnIdx] = ref;\n }}\n style={{\n ...style,\n left: getStickyLeftOffset(\n column.position!.gridIndex,\n column.position!.topHeaderGridIndex,\n ),\n }}\n isSticky={isStickyHeader}\n isResized={isColumnResized(column)}\n column={column}\n verticalAlign={headerVerticalAlign}\n onContextMenu={(e: React.SyntheticEvent) =>\n handleCellClick({\n e,\n type: 'contextMenu',\n columnIdx,\n ref: { current: headerRowsRefs.current[columnIdx] },\n })\n }\n onClick={(e: React.SyntheticEvent) =>\n handleCellClick({\n e,\n type: 'click',\n columnIdx,\n ref: { current: headerRowsRefs.current[columnIdx] },\n })\n }\n className={cnTableHeader('Cell', {\n isFirstColumn: column.position!.gridIndex === 0,\n isFirstRow: column.position!.level === 0,\n isLastInColumn:\n column.position?.topHeaderGridIndex !==\n headersWithMetaData[columnIdx + 1]?.position\n ?.topHeaderGridIndex,\n level: getLevelType(column),\n })}\n showVerticalShadow={\n showVerticalCellShadow &&\n column.position!.gridIndex! +\n (column?.position!.colSpan || 1) ===\n stickyColumnsGrid\n }\n >\n {column.title}\n\n <div\n className={cnTableHeader('Buttons', {\n isSortingActive: column.isSortingActive,\n isFilterActive: column.isFilterActive,\n verticalAlign: headerVerticalAlign,\n })}\n >\n {column.sortable && (\n <Button\n size=\"xs\"\n iconSize=\"s\"\n view=\"clear\"\n onlyIcon\n onClick={(): void => handleSortClick(column)}\n iconLeft={getSortIcon(column)}\n className={cnTableHeader('Icon', { type: 'sort' })}\n />\n )}\n\n {getFilterPopover(column)}\n\n {control(column)}\n </div>\n </TableCell>\n );\n },\n )}\n </div>\n {/*\n Рендерим тень заголовка отдельно чтобы избежать возможных наложений\n теней для ячеек заголовка и ячеек прикрепленных слева.\n */}\n <div className={cnTableHeader('ShadowWrapper')} style={tableHeaderStyle}>\n <div\n className={cnTableHeader('Shadow', {\n show: showHorizontalCellShadow && isStickyHeader,\n })}\n />\n </div>\n </>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TableHeader.js","names":["React","cn","Button","TableCell","getOptionsForFilters","TableFilterTooltip","cnTableHeader","levelTypes","TableHeader","isStickyHeader","headersWithMetaData","headerRowsHeights","headerRowsRefs","getStickyLeftOffset","stickyColumnsGrid","showVerticalCellShadow","headerVerticalAlign","getSortIcon","handleSortClick","handleFilterTogglerClick","handleCellClick","handleTooltipSave","filters","visibleFilter","selectedFilters","showHorizontalCellShadow","borderBetweenColumns","tableHeaderHeight","reduce","a","b","tableHeaderStyle","getLevelType","column","position","colSpan","smallTextSize","isColumnResized","headers","build","header","columns","forEach","col","find","head","title","push","some","isResized","getFilterPopover","accessor","curFilter","field","FilterComponent","component","name","filterComponentProps","props","onToggle","filterId","id","filterable","selected","type","handleFilterSave","filterValue","value","control","withVerticalBorder","map","columnIdx","style","gridColumnEnd","rowSpan","gridRowEnd","top","slice","level","ref","current","left","gridIndex","topHeaderGridIndex","e","isFirstColumn","isFirst","isFirstRow","isLastInColumn","isSortingActive","isFilterActive","verticalAlign","sortable","show"],"sources":["../../../../../../src/components/Table/Header/TableHeader.tsx"],"sourcesContent":["import './TableHeader.css';\n\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { Button } from '../../Button/Button';\nimport { TableCell } from '../Cell/TableCell';\nimport {\n FieldSelectedValues,\n Filters,\n getOptionsForFilters,\n SelectedFilters,\n} from '../filtering';\nimport { TableFilterTooltip } from '../FilterTooltip/TableFilterTooltip';\nimport { Header } from '../helpers';\nimport {\n ColumnMetaData,\n HeaderVerticalAlign,\n onCellClick,\n TableColumn,\n TableRow,\n} from '../Table';\n\nconst cnTableHeader = cn('TableHeader');\n\ntype TableCSSCustomProperty = {\n '--table-header-height': string;\n};\n\nexport const levelTypes = ['high', 'low', 'default'] as const;\nexport type LevelType = typeof levelTypes[number];\n\ntype Props<T extends TableRow> = {\n isStickyHeader: boolean;\n headersWithMetaData: Array<Header<T> & ColumnMetaData>;\n headerRowsHeights: Array<number>;\n headerRowsRefs: React.MutableRefObject<Record<number, HTMLDivElement | null>>;\n getStickyLeftOffset: (\n columnIndex: number,\n topHeaderGridIndex: number,\n ) => number | undefined;\n stickyColumnsGrid: number;\n showVerticalCellShadow: boolean;\n headerVerticalAlign: HeaderVerticalAlign;\n getSortIcon: (column: Header<T>) => React.FC;\n handleSortClick: (column: TableColumn<T>) => void;\n handleFilterTogglerClick: (id: string) => () => void;\n handleCellClick: onCellClick;\n handleTooltipSave: (\n field: string,\n tooltipSelectedFilters: FieldSelectedValues,\n value?: unknown,\n ) => void;\n filters: Filters<T> | undefined;\n visibleFilter: string | null;\n selectedFilters: SelectedFilters;\n showHorizontalCellShadow: boolean;\n borderBetweenColumns: boolean;\n};\n\nexport const TableHeader = <T extends TableRow>({\n isStickyHeader,\n headersWithMetaData,\n headerRowsHeights,\n headerRowsRefs,\n getStickyLeftOffset,\n stickyColumnsGrid,\n showVerticalCellShadow,\n headerVerticalAlign,\n getSortIcon,\n handleSortClick,\n handleFilterTogglerClick,\n handleCellClick,\n handleTooltipSave,\n filters,\n visibleFilter,\n selectedFilters,\n showHorizontalCellShadow,\n borderBetweenColumns,\n}: Props<T>): React.ReactElement => {\n const tableHeaderHeight = headerRowsHeights.reduce(\n (a: number, b: number) => a + b,\n 0,\n );\n const tableHeaderStyle: React.CSSProperties & TableCSSCustomProperty = {\n '--table-header-height': `${tableHeaderHeight}px`,\n };\n const getLevelType = (column: Header<T> & ColumnMetaData): LevelType => {\n if (Number(column.position!.colSpan) >= 1) return 'high';\n if (column.position?.smallTextSize) return 'low';\n return 'default';\n };\n const isColumnResized = (column: Header<T> & ColumnMetaData): boolean => {\n const headers: Array<Header<T> & ColumnMetaData> = [];\n const build = (header: Header<T> & ColumnMetaData) => {\n if (!header.columns) {\n headers.push(header);\n } else {\n header.columns.forEach((col) =>\n build(\n headersWithMetaData.find(\n (head) => head.title === col.title,\n ) as Header<T> & ColumnMetaData,\n ),\n );\n }\n };\n build(column);\n return headers.some((header) => header.isResized);\n };\n\n const getFilterPopover = (\n column: Header<T> & ColumnMetaData,\n ): React.ReactNode => {\n if (!filters || !column.accessor) {\n return null;\n }\n const curFilter = filters.find(({ field }) => field === column.accessor);\n const FilterComponent = curFilter?.component?.name;\n const filterComponentProps = curFilter?.component?.props ?? {};\n const onToggle = handleFilterTogglerClick(column.accessor);\n const filterId = curFilter?.id;\n const handleFilterSave = (filterValue?: unknown) => {\n if (filterId) {\n handleTooltipSave(column.accessor!, [filterId], filterValue);\n }\n onToggle();\n };\n\n return column.filterable ? (\n <TableFilterTooltip\n field={column.accessor}\n isOpened={visibleFilter === column.accessor}\n options={getOptionsForFilters(filters, column.accessor)}\n values={selectedFilters[column.accessor].selected || []}\n onChange={handleTooltipSave}\n onToggle={handleFilterTogglerClick(column.accessor)}\n className={cnTableHeader('Icon', { type: 'filter' })}\n >\n {FilterComponent && (\n <FilterComponent\n {...filterComponentProps}\n onConfirm={handleFilterSave}\n filterValue={selectedFilters[column.accessor]?.value}\n onCancel={handleFilterTogglerClick(column.accessor)}\n />\n )}\n </TableFilterTooltip>\n ) : null;\n };\n\n const control = (column: Header<T> & ColumnMetaData): React.ReactNode => {\n if (column.control) {\n return (\n <div className={cnTableHeader('Сontrol')}>\n {column.control({ column })}\n </div>\n );\n }\n\n return null;\n };\n\n return (\n <>\n <div\n className={cnTableHeader('Row', {\n withVerticalBorder: borderBetweenColumns,\n })}\n >\n {headersWithMetaData.map(\n (column: Header<T> & ColumnMetaData, columnIdx: number) => {\n const style: React.CSSProperties = {};\n if (column.position!.colSpan) {\n style.gridColumnEnd = `span ${column.position!.colSpan}`;\n }\n if (column.position!.rowSpan) {\n style.gridRowEnd = `span ${column.position!.rowSpan}`;\n }\n if (isStickyHeader) {\n style.top = headerRowsHeights\n .slice(0, column.position!.level)\n .reduce((a: number, b: number) => a + b, 0);\n }\n return (\n <TableCell\n type=\"header\"\n key={columnIdx}\n ref={(ref: HTMLDivElement | null): void => {\n /* eslint-disable-next-line no-param-reassign */\n headerRowsRefs.current[columnIdx] = ref;\n }}\n style={{\n ...style,\n left: getStickyLeftOffset(\n column.position!.gridIndex,\n column.position!.topHeaderGridIndex,\n ),\n }}\n isSticky={isStickyHeader}\n isResized={isColumnResized(column)}\n column={column}\n verticalAlign={headerVerticalAlign}\n onContextMenu={(e: React.SyntheticEvent) =>\n handleCellClick({\n e,\n type: 'contextMenu',\n columnIdx,\n ref: { current: headerRowsRefs.current[columnIdx] },\n })\n }\n onClick={(e: React.SyntheticEvent) =>\n handleCellClick({\n e,\n type: 'click',\n columnIdx,\n ref: { current: headerRowsRefs.current[columnIdx] },\n })\n }\n className={cnTableHeader('Cell', {\n isFirstColumn: column.position?.isFirst,\n isFirstRow: column.position!.level === 0,\n isLastInColumn:\n column.position?.topHeaderGridIndex !==\n headersWithMetaData[columnIdx + 1]?.position\n ?.topHeaderGridIndex,\n level: getLevelType(column),\n })}\n showVerticalShadow={\n showVerticalCellShadow &&\n column.position!.gridIndex! +\n (column?.position!.colSpan || 1) ===\n stickyColumnsGrid\n }\n >\n {column.title}\n\n <div\n className={cnTableHeader('Buttons', {\n isSortingActive: column.isSortingActive,\n isFilterActive: column.isFilterActive,\n verticalAlign: headerVerticalAlign,\n })}\n >\n {column.sortable && (\n <Button\n size=\"xs\"\n iconSize=\"s\"\n view=\"clear\"\n onlyIcon\n onClick={(): void => handleSortClick(column)}\n iconLeft={getSortIcon(column)}\n className={cnTableHeader('Icon', { type: 'sort' })}\n />\n )}\n\n {getFilterPopover(column)}\n\n {control(column)}\n </div>\n </TableCell>\n );\n },\n )}\n </div>\n {/*\n Рендерим тень заголовка отдельно чтобы избежать возможных наложений\n теней для ячеек заголовка и ячеек прикрепленных слева.\n */}\n <div className={cnTableHeader('ShadowWrapper')} style={tableHeaderStyle}>\n <div\n className={cnTableHeader('Shadow', {\n show: showHorizontalCellShadow && isStickyHeader,\n })}\n />\n </div>\n </>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _excluded=["columns","rows","size","filters","isResizable","stickyHeader","stickyColumns","minColumnWidth","activeRow","verticalAlign","headerVerticalAlign","zebraStriped","borderBetweenRows","borderBetweenColumns","emptyRowsPlaceholder","defaultExpandAll","className","onRowHover","onRowClick","onRowCreate","onCellClick","getAdditionalClassName","rowCreateText","lazyLoad","onSortBy","onFiltersUpdated","getTagLabel","getCellWrap","isExpandedRowsByDefault"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./Table.css";import React,{useEffect,useMemo}from"react";import{useComponentSize}from"../../hooks/useComponentSize/useComponentSize";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{IconSortDown}from"../../icons/IconSortDown/IconSortDown";import{IconSortUp}from"../../icons/IconSortUp/IconSortUp";import{IconUnsort}from"../../icons/IconUnsort/IconUnsort";import{sortBy as sortByDefault,updateAt}from"../../utils/array";import{cn}from"../../utils/bem";import{setRef}from"../../utils/setRef";import{isNotNil,isString}from"../../utils/type-guards";import{Button}from"../Button/Button";import{Text}from"../Text/Text";import{TableCell}from"./Cell/TableCell";import{fieldFiltersPresent,filterTableData,getSelectedFiltersList,isSelectedFiltersPresent,useSelectedFilters}from"./filtering";import{TableHeader}from"./Header/TableHeader";import{calulateColSpans,createSortingState,getColumnLeftOffset,getColumnsSize,getMergedArray,getNewSorting,Order,transformRows,useHeaderData,useLazyLoadData}from"./helpers";import{TableResizer}from"./Resizer/TableResizer";import{TableRowsCollapse}from"./RowsCollapse/TableRowsCollapse";import{TableSelectedOptionsList}from"./SelectedOptionsList/TableSelectedOptionsList";export{TableTextFilter}from"./TextFilter/TableTextFilter";export{TableFilterContainer}from"./FilterContainer/TableFilterContainer";export{TableNumberFilter}from"./NumberFilter/TableNumberFilter";export{TableChoiceGroupFilter}from"./ChoiceGroupFilter/TableChoiceGroupFilter";var cnTable=cn("Table");export var sizes=["s","m","l"];export var zebraStriped=["odd","even"];export var headerVerticalAligns=["center","bottom"];var createButtonSizeMap={s:"xs",m:"s",l:"m"},getColumnSortByField=function(a){return a.sortable&&a.sortByField||a.accessor},sortingData=function(a,b,c){if(c)return a;if(!b)return a;var d=sortByDefault(a,b.by,b.order,b.sortFn);return d.some(function(a){var b;return null===(b=a.rows)||void 0===b?void 0:b.length})?d.map(function(a){return a.rows?_objectSpread(_objectSpread({},a),{},{rows:sortingData(a.rows,b,c)}):a}):d},defaultEmptyRowsPlaceholder=React.createElement(Text,{as:"span",view:"primary",size:"s",lineHeight:"s"},"\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445"),InternalTable=function(a,b){var c,d,e,f,g=a.columns,h=a.rows,i=a.size,j=void 0===i?"l":i,k=a.filters,l=a.isResizable,m=void 0!==l&&l,n=a.stickyHeader,o=a.stickyColumns,p=void 0===o?0:o,q=a.minColumnWidth,r=void 0===q?150:q,s=a.activeRow,t=a.verticalAlign,u=void 0===t?"top":t,v=a.headerVerticalAlign,w=void 0===v?"center":v,x=a.zebraStriped,y=a.borderBetweenRows,z=a.borderBetweenColumns,A=void 0!==z&&z,B=a.emptyRowsPlaceholder,C=void 0===B?defaultEmptyRowsPlaceholder:B,D=a.defaultExpandAll,E=a.className,F=a.onRowHover,G=a.onRowClick,H=a.onRowCreate,I=a.onCellClick,J=a.getAdditionalClassName,K=a.rowCreateText,L=void 0===K?"+ \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443":K,M=a.lazyLoad,N=a.onSortBy,O=a.onFiltersUpdated,P=a.getTagLabel,Q=a.getCellWrap,R=a.isExpandedRowsByDefault,S=void 0!==R&&R,T=_objectWithoutProperties(a,_excluded),U=useHeaderData(g),V=U.headers,W=U.flattenedHeaders,X=U.lowHeaders,Y=U.headerRowsRefs,Z=U.headerRowsHeights,$=U.resizerTopOffsets,_=(null===(c=V[0][p-1])||void 0===c?void 0:c.position.gridIndex)+((null===(d=V[0][p-1])||void 0===d?void 0:d.position.colSpan)||1),aa=function(){return X.map(function(a){return a.width})},ba=React.useState(aa()),ca=_slicedToArray(ba,2),da=ca[0],ea=ca[1],fa=React.useMemo(function(){return k&&k.filter(function(a){return a.id&&a.field})},[k]);React.useEffect(function(){ea(aa())},[X.length]);var ga=React.useState([]),ha=_slicedToArray(ga,2),ia=ha[0],ja=ha[1],ka=React.useState(null),la=_slicedToArray(ka,2),ma=la[0],na=la[1],oa=React.useState(null),pa=_slicedToArray(oa,2),qa=pa[0],ra=pa[1],sa=React.useState({top:0,left:0}),ta=_slicedToArray(sa,2),ua=ta[0],va=ta[1],wa=React.useRef(null),xa=React.useRef({}),ya=React.useRef({}),za=useSelectedFilters(fa,O),Aa=za.selectedFilters,Ba=za.updateSelectedFilters,Ca=za.removeOneSelectedFilter,Da=za.removeAllSelectedFilters,Ea=React.useState([]),Fa=_slicedToArray(Ea,2),Ga=Fa[0],Ha=Fa[1];React.useEffect(function(){var a=g.find(function(a){return isString(a.order)&&Object.prototype.hasOwnProperty.call(Order,a.order)});if(a){var b=createSortingState(getColumnSortByField(a),a.order,a.sortFn);na(b)}},[g]),useComponentSize(wa);var Ia=(null===(e=wa.current)||void 0===e?void 0:e.clientHeight)||0,Ja=(null===(f=wa.current)||void 0===f?void 0:f.clientWidth)||0,Ka=0<ua.left,La=0<ua.top,Ma=s&&s.onChange,Na=function(a,b){ea(updateAt(da,a,b))},Oa=useMemo(function(){var a=Object.values(xa.current).filter(isNotNil),b=a.map(function(a){return a.getBoundingClientRect().width}),c=getMergedArray(b,da);return c.reduce(function(c,a){return(null!==c&&void 0!==c?c:0)+(null!==a&&void 0!==a?a:0)})},[da,m]);React.useLayoutEffect(function(){var a=Object.values(xa.current).filter(isNotNil);if(0!==a.length){var b=a.map(function(a){return a.getBoundingClientRect().width});if(ja(b),a[0].getBoundingClientRect().left!==a[a.length-1].getBoundingClientRect().left){var c=getMergedArray(b,da);return(null!==Oa&&void 0!==Oa?Oa:Ja)<Ja&&(c[c.length-1]=void 0),ea(c)}return 0<Ja&&!m?ea(aa()):void 0}},[Ja,Oa]);var Pa=function(a){return getColumnSortByField(a)===(null===ma||void 0===ma?void 0:ma.by)},Qa=function(a,b){return b>=p?void 0:getColumnLeftOffset({columnIndex:a,resizedColumnWidths:da,initialColumnWidths:ia})},Ra=function(a){var b=a.id,c=a.e;s&&s.onChange&&s.onChange({id:s.id===b?void 0:b,e:c})},Sa=function(a){return function(b){return F&&F({id:a,e:b})}},Ta=function(a,b){return function(c){return H&&H({e:c,id:b,index:a})}},Ua=function(a,b){var c=Math.min(r,ia[a]),d=da[a]||ia[a],e=Math.max(c,d+b);Na(a,e);var f=wa.current;a===da.length-1&&0<b&&f&&f.scrollBy(b,0)},Va=getColumnLeftOffset({columnIndex:p,resizedColumnWidths:da,initialColumnWidths:ia}),Wa=function(a){return a.map(function(a){var b,c=a.position.gridIndex,d=da[c],e=ia[c],f=d||e,g=getColumnLeftOffset({columnIndex:c,resizedColumnWidths:da,initialColumnWidths:ia}),h=p>a.position.topHeaderGridIndex,i=p>c||Va+ua.left<g+f,j=0<((null===(b=Aa[a.accessor])||void 0===b?void 0:b.selected)||[]).length;return _objectSpread(_objectSpread({},a),{},{filterable:!!(fa&&fieldFiltersPresent(fa,a.accessor)),isSortingActive:Pa(a),isFilterActive:j,isResized:!!f&&f!==e,isSticky:h,showResizer:i,columnWidth:f,columnLeftOffset:g})})},Xa=Wa(W),Ya=React.useMemo(function(){return h.some(function(a){var b;return!(!(null!==(b=a.rows)&&void 0!==b)||!b.length)})},[h]),Za=sortingData(h,ma,N),$a=fa&&isSelectedFiltersPresent(Aa)?filterTableData({data:Za,filters:fa||[],selectedFilters:Aa}):Za,_a=M||{},ab=_a.maxVisibleRows,bb=void 0===ab?210:ab,cb=_a.scrollableEl,db=void 0===cb?wa.current:cb,eb=useLazyLoadData(bb,db,!!M),fb=eb.getSlicedRows,gb=eb.setBoundaryRef,hb=transformRows($a,Ga,S),ib=fb(hb),jb={"--table-grid-template-columns":getColumnsSize(da),"--table-width":"".concat(Ja,"px")},kb=Wa(X).some(function(a){return a.mergeCells}),lb=function(a){return function(){return Ga.includes(a)?void Ha(function(b){return b.filter(function(b){return b!==a})}):void Ha(function(b){return[].concat(_toConsumableArray(b),[a])})}},mb=function(a,b){var c,d=!(!(null!==(c=a.rows)&&void 0!==c)||!c.length)&&0===b,e={level:a.options.level,isExpandedByDefault:S};if(!d||S)return e;var f=Ga.includes(a.id),g=lb(a.id);return _objectSpread(_objectSpread({},e),{},{withCollapseButton:d,isExpanded:f,toggleCollapse:g})},nb=function(a,b){var c=[];return a.forEach(function(a){var d,e;if((a.defaultExpand||0<(null!==(d=null===(e=a.rows)||void 0===e?void 0:e.length)&&void 0!==d?d:0)&&b)&&c.push(a.id),a.rows){var f=nb(a.rows,b);c=[].concat(_toConsumableArray(c),_toConsumableArray(f)),0<f.length&&-1===c.indexOf(a.id)&&c.push(a.id)}}),c};useEffect(function(){h&&Ha(nb(h,D))},[h,D]);var ob=function(a,b,c){var d=a.renderCell?a.renderCell(b):b[a.accessor];if(!Ya||0!==c)return d;var e=mb(b,c);return React.createElement(TableRowsCollapse,e,d)},pb=useMemo(function(){var a,b=ib.length,c=null!==(a=ib.slice(-1).pop())&&void 0!==a?a:{},d=c.id;return H?React.createElement("div",{className:cnTable(b?"CreatRowCell":"RowWithoutCells")},React.createElement(Button,{size:createButtonSizeMap[j],form:"brick",label:L,view:"clear",className:cnTable("CreateRowButton"),onClick:Ta(b,d),width:"full"})):null},[L,ib.length,H]),qb=function(a,b,c,d){var e=c.mergeCells,f=c.accessor,g=c.position,h=c.getComparisonValue,j=void 0===h?function(a){return a}:h,k=ib[b-1]&&j(ib[b-1][f]),l=j(a[f]),m={rowSpan:1,show:!1,style:{left:Qa(d,g.topHeaderGridIndex)}};if(e&&(ib[b-1]&&k!==l||0===b)){for(var n,o=b;o<ib.length&&ib[o+1]&&(n=j(ib[o+1][f]),l===n);o++)m.rowSpan++;1<m.rowSpan&&(m.style["--row-span"]="span ".concat(m.rowSpan)),m.show=!0}return e||(m.show=!0),m},rb=function(a){null===I||void 0===I?void 0:I(a)};return React.createElement("div",Object.assign({},T,{ref:useForkRef([wa,b]),className:cnTable({size:j,isResizable:m,zebraStriped:x,withBorderBottom:!$a.length},[E]),style:jb,onScroll:function handleScroll(a){a.target instanceof HTMLElement&&a.target===wa.current&&va({top:a.target.scrollTop,left:a.target.scrollLeft})}}),Wa(X).map(function(a,b){return React.createElement(TableCell,{type:"resizer",key:b,ref:function(a){xa.current[b]=a},style:{left:Qa(b,b)},onContextMenu:function onContextMenu(a){return rb({e:a,type:"contextMenu",columnIdx:b,ref:{current:xa.current[b]}})},onClick:function onClick(a){return rb({e:a,type:"click",columnIdx:b,ref:{current:xa.current[b]}})},column:a,showVerticalShadow:Ka},m&&React.createElement(TableResizer,{height:Ia-$[b],top:$[b],isVisible:a.showResizer,onResize:function onResize(a){return Ua(b,a)},onDoubleClick:function onDoubleClick(){return Na(b,ia[b])}}))}),React.createElement(TableHeader,{isStickyHeader:void 0!==n&&n,headersWithMetaData:Xa,headerRowsHeights:Z,headerRowsRefs:Y,getStickyLeftOffset:Qa,stickyColumnsGrid:_,showVerticalCellShadow:Ka,headerVerticalAlign:w,getSortIcon:function getSortIcon(a){return Pa(a)&&("desc"===(null===ma||void 0===ma?void 0:ma.order)?IconSortDown:IconSortUp)||IconUnsort},handleSortClick:function handleSortClick(a){var b=getNewSorting(ma,getColumnSortByField(a),a.sortable&&(null===a||void 0===a?void 0:a.sortFn)||void 0),c=b?{sortingBy:b.by,sortOrder:b.order}:null;N&&N(c),na(b)},handleFilterTogglerClick:function handleFilterTogglerClick(a){return function(){ra(qa===a?null:a)}},handleCellClick:rb,handleTooltipSave:function handleTooltipSave(a,b,c){Ba(a,b,c)},filters:fa,visibleFilter:qa,selectedFilters:Aa,showHorizontalCellShadow:La,borderBetweenColumns:A}),fa&&isSelectedFiltersPresent(Aa)&&React.createElement("div",{className:cnTable("RowWithoutCells")},React.createElement(TableSelectedOptionsList,{values:getSelectedFiltersList({filters:fa,selectedFilters:Aa,columns:X}),getTagLabel:P,onRemove:function removeSelectedFilter(a){return function(b){Ca(a,b)}}(fa),onReset:function resetSelectedFilters(){fa&&fa.length&&Da(fa)}})),0<ib.length?ib.map(function(a,b){var c=0==(b+1)%2?"even":"odd",d=Wa(X),e=calulateColSpans(d,a);return React.createElement("div",{key:a.id,role:"presentation",className:cnTable("CellsRow",{nth:c,withMergedCells:kb}),onMouseEnter:Sa(a.id),onMouseLeave:Sa(void 0),onClick:function onClick(b){return G&&G({id:a.id,e:b})}},d.map(function(c,d){var f=qb(a,b,c,d),g=f.show,h=f.style,i=f.rowSpan,j=e[d],k=0<d?e.slice(0,d).reduce(function(c,a){return c+a})+1:1;if(g&&0<j){var l;return React.createElement(TableCell,{type:"content",key:c.accessor,ref:function(c){ya.current["".concat(d,"-").concat(a.id)]=c,setRef(gb(d,b),c)},style:_objectSpread(_objectSpread({},h),{},(l={},_defineProperty(l,"--table-cell-col-start",k),_defineProperty(l,"--table-cell-col-end",k+j),l)),wrapperClassName:cnTable("ContentCell",{isActive:!!s&&s.id===a.id,isDarkned:!!s&&s.id!==void 0&&s.id!==a.id,isMerged:c.mergeCells&&1<i}),className:null===J||void 0===J?void 0:J({column:c,row:a,isActive:!!s&&s.id===a.id}),wrap:null===Q||void 0===Q?void 0:Q(a),onContextMenu:function onContextMenu(b){return rb({e:b,type:"contextMenu",columnIdx:d,rowId:a.id,ref:{current:ya.current["".concat(d,"-").concat(a.id)]}})},onClick:function onClick(b){Ra({id:a.id,e:b}),rb({e:b,type:"click",columnIdx:d,rowId:a.id,ref:{current:ya.current["".concat(d,"-").concat(a.id)]}})},column:c,verticalAlign:u,isClickable:!!Ma,showVerticalShadow:Ka&&(null===c||void 0===c?void 0:c.position.gridIndex)+((null===c||void 0===c?void 0:c.position.colSpan)||1)===_,isBorderTop:0<b&&void 0!==y&&y,isBorderLeft:0<d&&A},ob(c,a,d))}return null}))}):React.createElement("div",{className:cnTable("RowWithoutCells")},React.createElement("div",{className:cnTable("EmptyCell")},function renderEmptyRowsPlaceholder(a){return"string"==typeof a?React.createElement(Text,{size:"s"},a):a}(C))),pb)};export var Table=React.forwardRef(InternalTable);
|
|
1
|
+
import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _excluded=["columns","rows","size","filters","isResizable","stickyHeader","stickyColumns","minColumnWidth","activeRow","verticalAlign","headerVerticalAlign","zebraStriped","borderBetweenRows","borderBetweenColumns","emptyRowsPlaceholder","defaultExpandAll","className","onRowHover","onRowClick","onRowCreate","onCellClick","getAdditionalClassName","rowCreateText","lazyLoad","onSortBy","onFiltersUpdated","getTagLabel","getCellWrap","isExpandedRowsByDefault"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./Table.css";import React,{useEffect,useMemo}from"react";import{useComponentSize}from"../../hooks/useComponentSize/useComponentSize";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{IconSortDown}from"../../icons/IconSortDown/IconSortDown";import{IconSortUp}from"../../icons/IconSortUp/IconSortUp";import{IconUnsort}from"../../icons/IconUnsort/IconUnsort";import{sortBy as sortByDefault,updateAt}from"../../utils/array";import{cn}from"../../utils/bem";import{setRef}from"../../utils/setRef";import{isNotNil,isString}from"../../utils/type-guards";import{Button}from"../Button/Button";import{Text}from"../Text/Text";import{TableCell}from"./Cell/TableCell";import{fieldFiltersPresent,filterTableData,getSelectedFiltersList,isSelectedFiltersPresent,useSelectedFilters}from"./filtering";import{TableHeader}from"./Header/TableHeader";import{calulateColSpans,createSortingState,getColumnLeftOffset,getColumnsSize,getMergedArray,getNewSorting,Order,transformRows,useHeaderData,useLazyLoadData}from"./helpers";import{TableResizer}from"./Resizer/TableResizer";import{TableRowsCollapse}from"./RowsCollapse/TableRowsCollapse";import{TableSelectedOptionsList}from"./SelectedOptionsList/TableSelectedOptionsList";export{TableTextFilter}from"./TextFilter/TableTextFilter";export{TableFilterContainer}from"./FilterContainer/TableFilterContainer";export{TableNumberFilter}from"./NumberFilter/TableNumberFilter";export{TableChoiceGroupFilter}from"./ChoiceGroupFilter/TableChoiceGroupFilter";var cnTable=cn("Table");export var sizes=["s","m","l"];export var zebraStriped=["odd","even"];export var headerVerticalAligns=["center","bottom"];var createButtonSizeMap={s:"xs",m:"s",l:"m"},getColumnSortByField=function(a){return a.sortable&&a.sortByField||a.accessor},sortingData=function(a,b,c){if(c)return a;if(!b)return a;var d=sortByDefault(a,b.by,b.order,b.sortFn);return d.some(function(a){var b;return null===(b=a.rows)||void 0===b?void 0:b.length})?d.map(function(a){return a.rows?_objectSpread(_objectSpread({},a),{},{rows:sortingData(a.rows,b,c)}):a}):d},defaultEmptyRowsPlaceholder=React.createElement(Text,{as:"span",view:"primary",size:"s",lineHeight:"s"},"\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445"),InternalTable=function(a,b){var c,d,e,f,g=a.columns,h=a.rows,i=a.size,j=void 0===i?"l":i,k=a.filters,l=a.isResizable,m=void 0!==l&&l,n=a.stickyHeader,o=a.stickyColumns,p=void 0===o?0:o,q=a.minColumnWidth,r=void 0===q?150:q,s=a.activeRow,t=a.verticalAlign,u=void 0===t?"top":t,v=a.headerVerticalAlign,w=void 0===v?"center":v,x=a.zebraStriped,y=a.borderBetweenRows,z=a.borderBetweenColumns,A=void 0!==z&&z,B=a.emptyRowsPlaceholder,C=void 0===B?defaultEmptyRowsPlaceholder:B,D=a.defaultExpandAll,E=a.className,F=a.onRowHover,G=a.onRowClick,H=a.onRowCreate,I=a.onCellClick,J=a.getAdditionalClassName,K=a.rowCreateText,L=void 0===K?"+ \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443":K,M=a.lazyLoad,N=a.onSortBy,O=a.onFiltersUpdated,P=a.getTagLabel,Q=a.getCellWrap,R=a.isExpandedRowsByDefault,S=void 0!==R&&R,T=_objectWithoutProperties(a,_excluded),U=useHeaderData(g),V=U.headers,W=U.flattenedHeaders,X=U.lowHeaders,Y=U.headerRowsRefs,Z=U.headerRowsHeights,$=U.resizerTopOffsets,_=(null===(c=V[0][p-1])||void 0===c?void 0:c.position.gridIndex)+((null===(d=V[0][p-1])||void 0===d?void 0:d.position.colSpan)||1),aa=function(){return X.map(function(a){return a.width})},ba=React.useState(aa()),ca=_slicedToArray(ba,2),da=ca[0],ea=ca[1],fa=React.useMemo(function(){return k&&k.filter(function(a){return a.id&&a.field})},[k]);React.useEffect(function(){ea(aa())},[X.length]);var ga=React.useState([]),ha=_slicedToArray(ga,2),ia=ha[0],ja=ha[1],ka=React.useState(null),la=_slicedToArray(ka,2),ma=la[0],na=la[1],oa=React.useState(null),pa=_slicedToArray(oa,2),qa=pa[0],ra=pa[1],sa=React.useState({top:0,left:0}),ta=_slicedToArray(sa,2),ua=ta[0],va=ta[1],wa=React.useRef(null),xa=React.useRef({}),ya=React.useRef({}),za=useSelectedFilters(fa,O),Aa=za.selectedFilters,Ba=za.updateSelectedFilters,Ca=za.removeOneSelectedFilter,Da=za.removeAllSelectedFilters,Ea=React.useState([]),Fa=_slicedToArray(Ea,2),Ga=Fa[0],Ha=Fa[1];React.useEffect(function(){var a=g.find(function(a){return isString(a.order)&&Object.prototype.hasOwnProperty.call(Order,a.order)});if(a){var b=createSortingState(getColumnSortByField(a),a.order,a.sortFn);na(b)}},[g]),useComponentSize(wa);var Ia=(null===(e=wa.current)||void 0===e?void 0:e.clientHeight)||0,Ja=(null===(f=wa.current)||void 0===f?void 0:f.clientWidth)||0,Ka=0<ua.left,La=0<ua.top,Ma=s&&s.onChange,Na=function(a,b){ea(updateAt(da,a,b))},Oa=useMemo(function(){var a=Object.values(xa.current).filter(isNotNil),b=a.map(function(a){return a.getBoundingClientRect().width}),c=getMergedArray(b,da);return c.reduce(function(c,a){return(null!==c&&void 0!==c?c:0)+(null!==a&&void 0!==a?a:0)})},[da,m]);React.useLayoutEffect(function(){var a=Object.values(xa.current).filter(isNotNil);if(0!==a.length){var b=a.map(function(a){return a.getBoundingClientRect().width});if(ja(b),a[0].getBoundingClientRect().left!==a[a.length-1].getBoundingClientRect().left){var c=getMergedArray(b,da);return(null!==Oa&&void 0!==Oa?Oa:Ja)<Ja&&(c[c.length-1]=void 0),ea(c)}return 0<Ja&&!m?ea(aa()):void 0}},[Ja,Oa]);var Pa=function(a){return getColumnSortByField(a)===(null===ma||void 0===ma?void 0:ma.by)},Qa=function(a,b){return b>=p?void 0:getColumnLeftOffset({columnIndex:a,resizedColumnWidths:da,initialColumnWidths:ia})},Ra=function(a){var b=a.id,c=a.e;s&&s.onChange&&s.onChange({id:s.id===b?void 0:b,e:c})},Sa=function(a){return function(b){return F&&F({id:a,e:b})}},Ta=function(a,b){return function(c){return H&&H({e:c,id:b,index:a})}},Ua=function(a,b){var c=Math.min(r,ia[a]),d=da[a]||ia[a],e=Math.max(c,d+b);Na(a,e);var f=wa.current;a===da.length-1&&0<b&&f&&f.scrollBy(b,0)},Va=getColumnLeftOffset({columnIndex:p,resizedColumnWidths:da,initialColumnWidths:ia}),Wa=function(a){return a.map(function(a){var b,c=a.position.gridIndex,d=da[c],e=ia[c],f=d||e,g=getColumnLeftOffset({columnIndex:c,resizedColumnWidths:da,initialColumnWidths:ia}),h=p>a.position.topHeaderGridIndex,i=p>c||Va+ua.left<g+f,j=0<((null===(b=Aa[a.accessor])||void 0===b?void 0:b.selected)||[]).length;return _objectSpread(_objectSpread({},a),{},{filterable:!!(fa&&fieldFiltersPresent(fa,a.accessor)),isSortingActive:Pa(a),isFilterActive:j,isResized:!!f&&f!==e,isSticky:h,showResizer:i,columnWidth:f,columnLeftOffset:g})})},Xa=Wa(W),Ya=React.useMemo(function(){return h.some(function(a){var b;return!(!(null!==(b=a.rows)&&void 0!==b)||!b.length)})},[h]),Za=sortingData(h,ma,N),$a=fa&&isSelectedFiltersPresent(Aa)?filterTableData({data:Za,filters:fa||[],selectedFilters:Aa}):Za,_a=M||{},ab=_a.maxVisibleRows,bb=void 0===ab?210:ab,cb=_a.scrollableEl,db=void 0===cb?wa.current:cb,eb=useLazyLoadData(bb,db,!!M),fb=eb.getSlicedRows,gb=eb.setBoundaryRef,hb=transformRows($a,Ga,S),ib=fb(hb),jb={"--table-grid-template-columns":getColumnsSize(da),"--table-width":"".concat(Ja,"px")},kb=Wa(X).some(function(a){return a.mergeCells}),lb=function(a){return function(){return Ga.includes(a)?void Ha(function(b){return b.filter(function(b){return b!==a})}):void Ha(function(b){return[].concat(_toConsumableArray(b),[a])})}},mb=function(a,b){var c,d=!(!(null!==(c=a.rows)&&void 0!==c)||!c.length)&&0===b,e={level:a.options.level,isExpandedByDefault:S};if(!d||S)return e;var f=Ga.includes(a.id),g=lb(a.id);return _objectSpread(_objectSpread({},e),{},{withCollapseButton:d,isExpanded:f,toggleCollapse:g})},nb=function(a,b){var c=[];return a.forEach(function(a){var d,e;if((a.defaultExpand||0<(null!==(d=null===(e=a.rows)||void 0===e?void 0:e.length)&&void 0!==d?d:0)&&b)&&c.push(a.id),a.rows){var f=nb(a.rows,b);c=[].concat(_toConsumableArray(c),_toConsumableArray(f)),0<f.length&&-1===c.indexOf(a.id)&&c.push(a.id)}}),c};useEffect(function(){h&&Ha(nb(h,D))},[h,D]);var ob=function(a,b,c){var d=a.renderCell?a.renderCell(b):b[a.accessor];if(!Ya||0!==c)return d;var e=mb(b,c);return React.createElement(TableRowsCollapse,e,d)},pb=useMemo(function(){var a,b=ib.length,c=null!==(a=ib.slice(-1).pop())&&void 0!==a?a:{},d=c.id;return H?React.createElement("div",{className:cnTable(b?"CreatRowCell":"RowWithoutCells")},React.createElement(Button,{size:createButtonSizeMap[j],form:"brick",label:L,view:"clear",className:cnTable("CreateRowButton"),onClick:Ta(b,d),width:"full"})):null},[L,ib.length,H]),qb=function(a,b,c,d){var e,f=c.mergeCells,g=c.accessor,h=c.position,j=c.getComparisonValue,k=void 0===j?function(a){return a}:j,l=ib[b-1]&&k(ib[b-1][g]),m=k(a[g]),n={rowSpan:1,show:!1,style:{left:Qa(d,h.topHeaderGridIndex)}};if(f&&(ib[b-1]&&l!==m||0===b||l===m&&null!==(e=ib[b-1])&&void 0!==e&&e.rows)){if(!a.rows)for(var o,p=b;p<ib.length&&ib[p+1]&&(o=k(ib[p+1][g]),m===o&&!ib[p].rows);p++)n.rowSpan++;1<n.rowSpan&&(n.style["--row-span"]="span ".concat(n.rowSpan)),n.show=!0}return f||(n.show=!0),n},rb=function(a){null===I||void 0===I?void 0:I(a)};return React.createElement("div",Object.assign({},T,{ref:useForkRef([wa,b]),className:cnTable({size:j,isResizable:m,zebraStriped:x,withBorderBottom:!$a.length},[E]),style:jb,onScroll:function handleScroll(a){a.target instanceof HTMLElement&&a.target===wa.current&&va({top:a.target.scrollTop,left:a.target.scrollLeft})}}),Wa(X).map(function(a,b){return React.createElement(TableCell,{type:"resizer",key:b,ref:function(a){xa.current[b]=a},style:{left:Qa(b,b)},onContextMenu:function onContextMenu(a){return rb({e:a,type:"contextMenu",columnIdx:b,ref:{current:xa.current[b]}})},onClick:function onClick(a){return rb({e:a,type:"click",columnIdx:b,ref:{current:xa.current[b]}})},column:a,showVerticalShadow:Ka},m&&React.createElement(TableResizer,{height:Ia-$[b],top:$[b],isVisible:a.showResizer,onResize:function onResize(a){return Ua(b,a)},onDoubleClick:function onDoubleClick(){return Na(b,ia[b])}}))}),React.createElement(TableHeader,{isStickyHeader:void 0!==n&&n,headersWithMetaData:Xa,headerRowsHeights:Z,headerRowsRefs:Y,getStickyLeftOffset:Qa,stickyColumnsGrid:_,showVerticalCellShadow:Ka,headerVerticalAlign:w,getSortIcon:function getSortIcon(a){return Pa(a)&&("desc"===(null===ma||void 0===ma?void 0:ma.order)?IconSortDown:IconSortUp)||IconUnsort},handleSortClick:function handleSortClick(a){var b=getNewSorting(ma,getColumnSortByField(a),a.sortable&&(null===a||void 0===a?void 0:a.sortFn)||void 0),c=b?{sortingBy:b.by,sortOrder:b.order}:null;N&&N(c),na(b)},handleFilterTogglerClick:function handleFilterTogglerClick(a){return function(){ra(qa===a?null:a)}},handleCellClick:rb,handleTooltipSave:function handleTooltipSave(a,b,c){Ba(a,b,c)},filters:fa,visibleFilter:qa,selectedFilters:Aa,showHorizontalCellShadow:La,borderBetweenColumns:A}),fa&&isSelectedFiltersPresent(Aa)&&React.createElement("div",{className:cnTable("RowWithoutCells")},React.createElement(TableSelectedOptionsList,{values:getSelectedFiltersList({filters:fa,selectedFilters:Aa,columns:X}),getTagLabel:P,onRemove:function removeSelectedFilter(a){return function(b){Ca(a,b)}}(fa),onReset:function resetSelectedFilters(){fa&&fa.length&&Da(fa)}})),0<ib.length?ib.map(function(a,b){var c=0==(b+1)%2?"even":"odd",d=Wa(X),e=calulateColSpans(d,a);return React.createElement("div",{key:a.id,role:"presentation",className:cnTable("CellsRow",{nth:c,withMergedCells:kb}),onMouseEnter:Sa(a.id),onMouseLeave:Sa(void 0),onClick:function onClick(b){return G&&G({id:a.id,e:b})}},d.map(function(c,d){var f=qb(a,b,c,d),g=f.show,h=f.style,i=f.rowSpan,j=e[d],k=0<d?e.slice(0,d).reduce(function(c,a){return c+a})+1:1;if(g&&0<j){var l;return React.createElement(TableCell,{type:"content",key:c.accessor,ref:function(c){ya.current["".concat(d,"-").concat(a.id)]=c,setRef(gb(d,b),c)},style:_objectSpread(_objectSpread({},h),{},(l={},_defineProperty(l,"--table-cell-col-start",k),_defineProperty(l,"--table-cell-col-end",k+j),l)),wrapperClassName:cnTable("ContentCell",{isActive:!!s&&s.id===a.id,isDarkned:!!s&&s.id!==void 0&&s.id!==a.id,isMerged:c.mergeCells&&1<i}),className:null===J||void 0===J?void 0:J({column:c,row:a,isActive:!!s&&s.id===a.id}),wrap:null===Q||void 0===Q?void 0:Q(a),onContextMenu:function onContextMenu(b){return rb({e:b,type:"contextMenu",columnIdx:d,rowId:a.id,ref:{current:ya.current["".concat(d,"-").concat(a.id)]}})},onClick:function onClick(b){Ra({id:a.id,e:b}),rb({e:b,type:"click",columnIdx:d,rowId:a.id,ref:{current:ya.current["".concat(d,"-").concat(a.id)]}})},column:c,verticalAlign:u,isClickable:!!Ma,showVerticalShadow:Ka&&(null===c||void 0===c?void 0:c.position.gridIndex)+((null===c||void 0===c?void 0:c.position.colSpan)||1)===_,isBorderTop:0<b&&void 0!==y&&y,isBorderLeft:0<d&&A},ob(c,a,d))}return null}))}):React.createElement("div",{className:cnTable("RowWithoutCells")},React.createElement("div",{className:cnTable("EmptyCell")},function renderEmptyRowsPlaceholder(a){return"string"==typeof a?React.createElement(Text,{size:"s"},a):a}(C))),pb)};export var Table=React.forwardRef(InternalTable);
|
|
2
2
|
//# sourceMappingURL=Table.js.map
|