@foxford/ui 2.0.0-beta-d6e6153-20220708 → 2.0.0-beta-7e6eb6a-20220712
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/components/Button/Button.js +1 -1
- package/components/Button/Button.js.map +1 -1
- package/components/Text.Ellipse/Text.Ellipse.js +1 -1
- package/components/Text.Ellipse/Text.Ellipse.js.map +1 -1
- package/dts/index.d.ts +5 -0
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/mixins/responsive-property.js +1 -1
- package/mixins/responsive-property.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/objectSpread2';import a from'@babel/runtime/helpers/objectWithoutProperties';import{Link as r}from'react-router-dom';import{useClassname as t}from'../../hooks/useClassname.js';import{Root as
|
|
1
|
+
import e from'@babel/runtime/helpers/objectSpread2';import a from'@babel/runtime/helpers/objectWithoutProperties';import{Link as r}from'react-router-dom';import{useClassname as t}from'../../hooks/useClassname.js';import{Root as o,Content as s}from'./style.js';import{PROPS_BY_SIZE as n,PRESETS as i}from'./default.js';import{jsxs as l,jsx as m}from'react/jsx-runtime';var d=["children","className","disabled","href","to","as","target","content","onClick","ref","icon","type","innerRef"];function c(p){var{children:f,className:u,disabled:y,href:b,to:h,as:v,target:j,content:N,onClick:C,ref:g,icon:k,type:x,innerRef:P}=p,R=a(p,d);var S=v||(y?'button':b?'a':h?r:'button');var _='a'!==S||y?{}:{href:b||h,target:j};var z='string'==typeof S||y?{}:{to:h||b};var B=R.size&&!R.round&&n[R.size]||{};var E=(e=>e.primary?i.primary:e.secondary?i.secondary:i.default)(p);var w=t(c.displayName,u);var I=t(c.displayName);return l(o,e(e(e(e(e(e({as:S,className:w,type:'button'===S?x:void 0,onClick:y||R.loading?void 0:C},B),_),z),E),R),{},{disabled:y,ref:g||P,children:[k&&m("span",{className:"icon",children:k}),(N||f)&&m(s,{className:"".concat(I,"__content"),children:N||f})]}))}c.defaultProps={size:'m',rounded:!0,display:'inline-flex',type:'button',width:'auto'},c.displayName='Button';export{c as Button};
|
|
2
2
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Link } from 'react-router-dom'\nimport { useClassname } from 'hooks/useClassname'\nimport { Display } from '../../mixins/display'\nimport { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { BaseProps, Tooltiped } from '../../shared/interfaces'\nimport { Color } from '../../mixins/color'\nimport { Anchor } from '../../components/Anchor'\nimport * as Styled from './style'\nimport { PRESETS, PROPS_BY_SIZE } from './default'\n\nexport interface ButtonProps\n extends BaseProps,\n Tooltiped,\n Display,\n Color,\n Color<'fontColor'>,\n ResponsiveNamedProperty<'padding'>,\n ResponsiveNamedProperty<'paddingTop'>,\n ResponsiveNamedProperty<'paddingRight'>,\n ResponsiveNamedProperty<'paddingBottom'>,\n ResponsiveNamedProperty<'paddingLeft'>,\n ResponsiveNamedProperty<'margin'>,\n ResponsiveNamedProperty<'marginTop'>,\n ResponsiveNamedProperty<'marginRight'>,\n ResponsiveNamedProperty<'marginBottom'>,\n ResponsiveNamedProperty<'marginLeft'>,\n ResponsiveNamedProperty<'fontSize'>,\n ResponsiveNamedProperty<'fluid', boolean>,\n ResponsiveNamedProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>,\n ResponsiveNamedProperty<'height', 'l' | 'm' | 's' | 'xs' | number> {\n /**\n * Node type\n */\n as?: 'div' | 'span' | 'a' | 'button' | typeof Link | typeof Anchor\n target?: string\n rel?: string\n /**\n * Link href\n */\n href?: string\n /**\n * React router link to\n */\n to?: string\n /**\n * Type for button element\n */\n type?: 'button' | 'submit' | 'reset'\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Basic button\n */\n basic?: boolean\n /**\n * Disabled\n */\n disabled?: boolean\n /**\n * Is primary\n */\n primary?: boolean\n /**\n * Is secondary\n */\n secondary?: boolean\n /**\n * Is inverted\n */\n inverted?: boolean\n /**\n * Is rounded\n */\n rounded?: boolean\n /**\n * Is round (in a shape of circle)\n */\n round?: boolean\n /**\n * Indicates if there should not be any margin\n * between this button and the previous one\n */\n noSpacing?: boolean\n /**\n * Is in loading state\n */\n loading?: boolean\n /**\n * Button icon\n */\n icon?: React.ReactNode\n /** On click callback */\n onClick?: () => void\n /** Function to make ref */\n ref?: React.LegacyRef<HTMLDivElement>\n /**\n * Size\n */\n size?: keyof typeof PROPS_BY_SIZE\n}\n\nButton.defaultProps = {\n size: 'm',\n rounded: true,\n display: 'inline-flex',\n type: 'button',\n width: 'auto',\n}\n\nButton.displayName = 'Button'\n\nconst extractPresetByProps = (props: ButtonProps): Partial<ButtonProps> => {\n if (props.primary) return PRESETS.primary\n if (props.secondary) return PRESETS.secondary\n return PRESETS.default\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`Tooltiped`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Color<'fontColor'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'padding'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'paddingTop'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'paddingRight'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'paddingBottom'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'paddingLeft'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'margin'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'marginTop'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'marginRight'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'marginBottom'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'marginLeft'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'fontSize'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'fluid', boolean>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'height', 'l' | 'm' | 's' | 'xs' | number>`](#/Миксины)\n */\nexport function Button(props: ButtonProps) {\n const {
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Link } from 'react-router-dom'\nimport { useClassname } from 'hooks/useClassname'\nimport { Display } from '../../mixins/display'\nimport { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { BaseProps, Tooltiped } from '../../shared/interfaces'\nimport { Color } from '../../mixins/color'\nimport { Anchor } from '../../components/Anchor'\nimport * as Styled from './style'\nimport { PRESETS, PROPS_BY_SIZE } from './default'\n\nexport interface ButtonProps\n extends BaseProps,\n Tooltiped,\n Display,\n Color,\n Color<'fontColor'>,\n ResponsiveNamedProperty<'padding'>,\n ResponsiveNamedProperty<'paddingTop'>,\n ResponsiveNamedProperty<'paddingRight'>,\n ResponsiveNamedProperty<'paddingBottom'>,\n ResponsiveNamedProperty<'paddingLeft'>,\n ResponsiveNamedProperty<'margin'>,\n ResponsiveNamedProperty<'marginTop'>,\n ResponsiveNamedProperty<'marginRight'>,\n ResponsiveNamedProperty<'marginBottom'>,\n ResponsiveNamedProperty<'marginLeft'>,\n ResponsiveNamedProperty<'fontSize'>,\n ResponsiveNamedProperty<'fluid', boolean>,\n ResponsiveNamedProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>,\n ResponsiveNamedProperty<'height', 'l' | 'm' | 's' | 'xs' | number> {\n /**\n * Node type\n */\n as?: 'div' | 'span' | 'a' | 'button' | typeof Link | typeof Anchor\n target?: string\n rel?: string\n /**\n * Link href\n */\n href?: string\n /**\n * React router link to\n */\n to?: string\n /**\n * Type for button element\n */\n type?: 'button' | 'submit' | 'reset'\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Basic button\n */\n basic?: boolean\n /**\n * Disabled\n */\n disabled?: boolean\n /**\n * Is primary\n */\n primary?: boolean\n /**\n * Is secondary\n */\n secondary?: boolean\n /**\n * Is inverted\n */\n inverted?: boolean\n /**\n * Is rounded\n */\n rounded?: boolean\n /**\n * Is round (in a shape of circle)\n */\n round?: boolean\n /**\n * Indicates if there should not be any margin\n * between this button and the previous one\n */\n noSpacing?: boolean\n /**\n * Is in loading state\n */\n loading?: boolean\n /**\n * Button icon\n */\n icon?: React.ReactNode\n /** On click callback */\n onClick?: () => void\n /** Function to make ref */\n ref?: React.LegacyRef<HTMLDivElement>\n /**\n * Size\n */\n size?: keyof typeof PROPS_BY_SIZE\n /**\n * Content of button\n * @deprecated Use children property\n */\n content?: React.ReactNode\n}\n\nButton.defaultProps = {\n size: 'm',\n rounded: true,\n display: 'inline-flex',\n type: 'button',\n width: 'auto',\n}\n\nButton.displayName = 'Button'\n\nconst extractPresetByProps = (props: ButtonProps): Partial<ButtonProps> => {\n if (props.primary) return PRESETS.primary\n if (props.secondary) return PRESETS.secondary\n return PRESETS.default\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`Tooltiped`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Color<'fontColor'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'padding'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'paddingTop'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'paddingRight'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'paddingBottom'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'paddingLeft'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'margin'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'marginTop'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'marginRight'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'marginBottom'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'marginLeft'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'fontSize'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'fluid', boolean>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'height', 'l' | 'm' | 's' | 'xs' | number>`](#/Миксины)\n */\nexport function Button(props: ButtonProps) {\n const {\n children,\n className,\n disabled,\n href,\n to,\n as,\n target,\n content,\n onClick,\n ref,\n icon,\n type,\n innerRef,\n ...restProps\n } = props\n\n const _as = as || (disabled ? 'button' : href ? 'a' : to ? Link : 'button')\n const aProps = _as === 'a' && !disabled ? { href: href || to, target } : {}\n const linkProps = typeof _as !== 'string' && !disabled ? { to: to || href } : {}\n const propsBySize: Partial<ButtonProps> =\n restProps.size && !restProps.round ? PROPS_BY_SIZE[restProps.size] || {} : {}\n const presetProps: Partial<ButtonProps> = extractPresetByProps(props)\n const _className = useClassname(Button.displayName, className)\n const _contentClassName = useClassname(Button.displayName)\n\n return (\n <Styled.Root\n as={_as}\n className={_className}\n type={_as === 'button' ? type : undefined}\n onClick={disabled || restProps.loading ? undefined : onClick}\n {...propsBySize}\n {...aProps}\n {...linkProps}\n {...presetProps}\n {...restProps}\n disabled={disabled}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref={(ref || innerRef) as any}\n >\n {icon && <span className='icon'>{icon}</span>}\n {(content || children) && (\n <Styled.Content className={`${_contentClassName}__content`}>{content || children}</Styled.Content>\n )}\n </Styled.Root>\n )\n}\n"],"names":["Button","props","children","className","disabled","href","to","as","target","content","onClick","ref","icon","type","innerRef","restProps","_excluded","_as","Link","aProps","linkProps","propsBySize","size","round","PROPS_BY_SIZE","presetProps","primary","PRESETS","secondary","default","_className","useClassname","displayName","_contentClassName","_jsxs","Styled.Root","_objectSpread","undefined","loading","_jsx","Styled.Content","concat","defaultProps","rounded","display","width"],"mappings":"ueAkJO,SAASA,EAAOC,GACrB,IAAMC,SACJA,EADIC,UAEJA,EAFIC,SAGJA,EAHIC,KAIJA,EAJIC,GAKJA,EALIC,GAMJA,EANIC,OAOJA,EAPIC,QAQJA,EARIC,QASJA,EATIC,IAUJA,EAVIC,KAWJA,EAXIC,KAYJA,EAZIC,SAaJA,GAEEb,EADCc,IACDd,EAfJe,GAiBA,IAAMC,EAAMV,IAAOH,EAAW,SAAWC,EAAO,IAAMC,EAAKY,EAAO,UAClE,IAAMC,EAAiB,MAARF,GAAgBb,EAA0C,GAA/B,CAAEC,KAAMA,GAAQC,EAAIE,OAAAA,GAC9D,IAAMY,EAA2B,iBAARH,GAAqBb,EAAgC,GAArB,CAAEE,GAAIA,GAAMD,GACrE,IAAMgB,EACJN,EAAUO,OAASP,EAAUQ,OAAQC,EAAcT,EAAUO,OAAc,GAC7E,IAAMG,EAnDsBxB,CAAAA,GACxBA,EAAMyB,QAAgBC,EAAQD,QAC9BzB,EAAM2B,UAAkBD,EAAQC,UAC7BD,EAAQE,QAHa5B,CAmDmCA,GAC/D,IAAM6B,EAAaC,EAAa/B,EAAOgC,YAAa7B,GACpD,IAAM8B,EAAoBF,EAAa/B,EAAOgC,aAE9C,OACEE,EAACC,EAADC,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CACE7B,GAAIU,EACJd,UAAW2B,EACXjB,KAAc,WAARI,EAAmBJ,OAAOwB,EAChC3B,QAASN,GAAYW,EAAUuB,aAAAA,EAAsB5B,GACjDW,GACAF,GACAC,GACAK,GACAV,GATN,GAAA,CAUEX,SAAUA,EAEVO,IAAMA,GAAOG,EAZfZ,SAAA,CAcGU,GAAQ2B,EAAA,OAAA,CAAMpC,UAAU,OAAhBD,SAAwBU,KAC/BH,GAAWP,IACXqC,EAACC,EAAD,CAAgBrC,UAAS,GAAAsC,OAAKR,EAA9B,aAAA/B,SAA6DO,GAAWP,QAlFhFF,EAAO0C,aAAe,CACpBpB,KAAM,IACNqB,SAAAA,EACAC,QAAS,cACT/B,KAAM,SACNgC,MAAO,QAGT7C,EAAOgC,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import t from'@babel/runtime/helpers/objectWithoutProperties';import e from'@babel/runtime/helpers/objectSpread2';import{Component as s}from'react';import{Spacer as i}from'../Spacer/Spacer.js';import{Anchor as r}from'../Anchor/Anchor.js';import{Text as o}from'../Text/Text.js';import{Ul as l,Li as n}from'./style.js';import{jsx as a,jsxs as p}from'react/jsx-runtime';var h=["className","style","moreText","lessText","showToggler"];class c extends s{constructor(t){super(t),this.getContent=t=>{var{content:s,chars:i=0}=this.props;if(!s)return'';var{isEllipsed:r}=this.state;var p='string'==typeof s?'':[];if(this.state.isUnFolded)p=s;else if('string'==typeof p)p=(r=s.length>i)?"".concat(s.slice(0,i),"..."):s;else{var h=i;for(var c=0;c<s.length;c++){if(!(h-s[c].length>0)){r=!0,p[c]="".concat(s[c].slice(0,h),"...");break}h-=s[c].length,p[c]=s[c]}}return this.state.isEllipsed!==r&&setTimeout((()=>this.setState({isEllipsed:r}))),'string'==typeof p?a(o,e(e({},t),{},{content:this.getQuted(p)})):a(l,{children:p.map(((s,i)=>a(n,{children:a(o,e(e({},t),{},{display:"inline",content:s}))},i)))})},this.getQuted=t=>this.props.quoted?"«".concat(t,"»"):t,this.toggle=()=>{this.setState({isUnFolded:!this.state.isUnFolded})},this.state={isUnFolded:!1,isEllipsed:!1}}componentDidUpdate(t){var{content:e}=t;e!==this.props.content&&this.state.isUnFolded&&this.toggle()}render(){var e=this.props,{className:s="",style:o,moreText:l="Читать полностью",lessText:n="Свернуть",showToggler:c=!0}=e,d=t(e,h);var{isUnFolded:m,isEllipsed:g}=this.state;return p("div",{className:s,style:o,children:[this.getContent(d),c&&g&&a(i,{marginTop:16,marginBottom:1,children:a(r,{pseudo:!0,onClick:this.toggle,children:m?n:l})})]})}}c.displayName='Text.Ellipse';export{c as TextEllipse};
|
|
1
|
+
import t from'@babel/runtime/helpers/objectWithoutProperties';import e from'@babel/runtime/helpers/objectSpread2';import{Component as s}from'react';import{Spacer as i}from'../Spacer/Spacer.js';import{Anchor as r}from'../Anchor/Anchor.js';import{Text as o}from'../Text/Text.js';import{Ul as l,Li as n}from'./style.js';import{jsx as a,jsxs as p}from'react/jsx-runtime';var h=["className","style","moreText","lessText","showToggler"];class c extends s{constructor(t){super(t),this.getContent=t=>{var{content:s,chars:i=0}=this.props;if(!s)return'';var{isEllipsed:r}=this.state;var p='string'==typeof s?'':[];if(this.state.isUnFolded)p=s;else if('string'==typeof p)p=(r=0!==i&&s.length>i)&&0!==i?"".concat(s.slice(0,i),"..."):s;else{var h=i;for(var c=0;c<s.length;c++){if(!(h-s[c].length>0)){r=!0,p[c]="".concat(s[c].slice(0,h),"...");break}h-=s[c].length,p[c]=s[c]}}return this.state.isEllipsed!==r&&setTimeout((()=>this.setState({isEllipsed:r}))),'string'==typeof p?a(o,e(e({},t),{},{content:this.getQuted(p)})):a(l,{children:p.map(((s,i)=>a(n,{children:a(o,e(e({},t),{},{display:"inline",content:s}))},i)))})},this.getQuted=t=>this.props.quoted?"«".concat(t,"»"):t,this.toggle=()=>{this.setState({isUnFolded:!this.state.isUnFolded})},this.state={isUnFolded:!1,isEllipsed:!1}}componentDidUpdate(t){var{content:e}=t;e!==this.props.content&&this.state.isUnFolded&&this.toggle()}render(){var e=this.props,{className:s="",style:o,moreText:l="Читать полностью",lessText:n="Свернуть",showToggler:c=!0}=e,d=t(e,h);var{isUnFolded:m,isEllipsed:g}=this.state;return p("div",{className:s,style:o,children:[this.getContent(d),c&&g&&a(i,{marginTop:16,marginBottom:1,children:a(r,{pseudo:!0,onClick:this.toggle,children:m?n:l})})]})}}c.displayName='Text.Ellipse';export{c as TextEllipse};
|
|
2
2
|
//# sourceMappingURL=Text.Ellipse.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.Ellipse.js","sources":["../../../../src/components/Text.Ellipse/Text.Ellipse.tsx"],"sourcesContent":["import { Component } from 'react'\nimport { Spacer } from '../Spacer/Spacer'\nimport { Anchor } from '../Anchor/Anchor'\nimport { Text, TextProps } from '../Text'\nimport * as Styled from './style'\n\nexport interface TextEllipseProps extends Omit<TextProps, 'content'> {\n /** Toggle text for folded state */\n moreText?: string\n /** Toggle text for unfolded state */\n lessText?: string\n /** Classname */\n className?: string\n /** Html content */\n content: string | string[]\n /** Characters quantity for ellipsed text */\n chars?: number\n /** Wrap text in quotes */\n quoted?: boolean\n /** Flag to show toggler */\n showToggler?: boolean\n}\n\ninterface TextEllipseState {\n isUnFolded: boolean\n isEllipsed: boolean\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)\n */\nexport class TextEllipse extends Component<TextEllipseProps, TextEllipseState> {\n static displayName = 'Text.Ellipse'\n\n constructor(props: TextEllipseProps) {\n super(props)\n\n this.state = {\n isUnFolded: false,\n isEllipsed: false,\n }\n }\n\n componentDidUpdate({ content }: TextEllipseProps) {\n if (content !== this.props.content && this.state.isUnFolded) {\n this.toggle()\n }\n }\n\n getContent = (props: Omit<TextEllipseProps, 'className' | 'moreText' | 'lessText' | 'showToggler'>) => {\n const { content, chars = 0 } = this.props\n\n if (!content) return ''\n\n let { isEllipsed } = this.state\n let text: string | string[] = typeof content === 'string' ? '' : []\n\n if (!this.state.isUnFolded) {\n if (typeof text === 'string') {\n isEllipsed = content.length > chars\n\n text = isEllipsed ? `${content.slice(0, chars)}...` : content\n } else {\n let leftChars = chars\n\n for (let index = 0; index < content.length; index++) {\n if (leftChars - content[index].length > 0) {\n leftChars -= content[index].length\n\n text[index] = content[index]\n } else {\n isEllipsed = true\n text[index] = `${content[index].slice(0, leftChars)}...`\n\n break\n }\n }\n }\n } else {\n text = content\n }\n\n if (this.state.isEllipsed !== isEllipsed) setTimeout(() => this.setState({ isEllipsed }))\n\n return typeof text === 'string' ? (\n <Text {...props} content={this.getQuted(text)} />\n ) : (\n <Styled.Ul>\n {text.map((item, index) => (\n <Styled.Li key={index}>\n <Text {...props} display='inline' content={item} />\n </Styled.Li>\n ))}\n </Styled.Ul>\n )\n }\n\n getQuted = (content: string) => (this.props.quoted ? `«${content}»` : content)\n\n toggle = () => {\n this.setState({ isUnFolded: !this.state.isUnFolded })\n }\n\n render() {\n const {\n className = '',\n style,\n moreText = 'Читать полностью',\n lessText = 'Свернуть',\n showToggler = true,\n ...restProps\n } = this.props\n const { isUnFolded, isEllipsed } = this.state\n\n return (\n <div className={className} style={style}>\n {this.getContent(restProps)}\n {showToggler && isEllipsed && (\n <Spacer marginTop={16} marginBottom={1}>\n <Anchor pseudo onClick={this.toggle}>\n {isUnFolded ? lessText : moreText}\n </Anchor>\n </Spacer>\n )}\n </div>\n )\n }\n}\n"],"names":["TextEllipse","Component","constructor","props","super","this","getContent","content","chars","isEllipsed","state","text","isUnFolded","length","slice","leftChars","index","concat","setTimeout","setState","_jsx","Text","getQuted","Styled.Ul","children","map","item","Styled.Li","_objectSpread","display","quoted","toggle","componentDidUpdate","_ref","render","_this$props","className","style","moreText","lessText","showToggler","restProps","_objectWithoutProperties","_excluded","_jsxs","Spacer","marginTop","marginBottom","Anchor","pseudo","onClick","displayName"],"mappings":"+aAmCO,MAAMA,UAAoBC,EAG/BC,YAAYC,GACVC,MAAMD,GAD6BE,KAerCC,WAAcH,IACZ,IAAMI,QAAEA,EAAFC,MAAWA,EAAQ,GAAMH,KAAKF,MAEpC,IAAKI,EAAS,MAAO,GAErB,IAAIE,WAAEA,GAAeJ,KAAKK,MAC1B,IAAIC,EAA6C,iBAAZJ,EAAuB,GAAK,GAEjE,GAAKF,KAAKK,MAAME,WAsBdD,EAAOJ,OArBP,GAAoB,iBAATI,EAGTA,GAFAF,
|
|
1
|
+
{"version":3,"file":"Text.Ellipse.js","sources":["../../../../src/components/Text.Ellipse/Text.Ellipse.tsx"],"sourcesContent":["import { Component } from 'react'\nimport { Spacer } from '../Spacer/Spacer'\nimport { Anchor } from '../Anchor/Anchor'\nimport { Text, TextProps } from '../Text'\nimport * as Styled from './style'\n\nexport interface TextEllipseProps extends Omit<TextProps, 'content'> {\n /** Toggle text for folded state */\n moreText?: string\n /** Toggle text for unfolded state */\n lessText?: string\n /** Classname */\n className?: string\n /** Html content */\n content: string | string[]\n /** Characters quantity for ellipsed text */\n chars?: number\n /** Wrap text in quotes */\n quoted?: boolean\n /** Flag to show toggler */\n showToggler?: boolean\n}\n\ninterface TextEllipseState {\n isUnFolded: boolean\n isEllipsed: boolean\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)\n */\nexport class TextEllipse extends Component<TextEllipseProps, TextEllipseState> {\n static displayName = 'Text.Ellipse'\n\n constructor(props: TextEllipseProps) {\n super(props)\n\n this.state = {\n isUnFolded: false,\n isEllipsed: false,\n }\n }\n\n componentDidUpdate({ content }: TextEllipseProps) {\n if (content !== this.props.content && this.state.isUnFolded) {\n this.toggle()\n }\n }\n\n getContent = (props: Omit<TextEllipseProps, 'className' | 'moreText' | 'lessText' | 'showToggler'>) => {\n const { content, chars = 0 } = this.props\n\n if (!content) return ''\n\n let { isEllipsed } = this.state\n let text: string | string[] = typeof content === 'string' ? '' : []\n\n if (!this.state.isUnFolded) {\n if (typeof text === 'string') {\n isEllipsed = chars !== 0 && content.length > chars\n\n text = isEllipsed && chars !== 0 ? `${content.slice(0, chars)}...` : content\n } else {\n let leftChars = chars\n\n for (let index = 0; index < content.length; index++) {\n if (leftChars - content[index].length > 0) {\n leftChars -= content[index].length\n\n text[index] = content[index]\n } else {\n isEllipsed = true\n text[index] = `${content[index].slice(0, leftChars)}...`\n\n break\n }\n }\n }\n } else {\n text = content\n }\n\n if (this.state.isEllipsed !== isEllipsed) setTimeout(() => this.setState({ isEllipsed }))\n\n return typeof text === 'string' ? (\n <Text {...props} content={this.getQuted(text)} />\n ) : (\n <Styled.Ul>\n {text.map((item, index) => (\n <Styled.Li key={index}>\n <Text {...props} display='inline' content={item} />\n </Styled.Li>\n ))}\n </Styled.Ul>\n )\n }\n\n getQuted = (content: string) => (this.props.quoted ? `«${content}»` : content)\n\n toggle = () => {\n this.setState({ isUnFolded: !this.state.isUnFolded })\n }\n\n render() {\n const {\n className = '',\n style,\n moreText = 'Читать полностью',\n lessText = 'Свернуть',\n showToggler = true,\n ...restProps\n } = this.props\n const { isUnFolded, isEllipsed } = this.state\n\n return (\n <div className={className} style={style}>\n {this.getContent(restProps)}\n {showToggler && isEllipsed && (\n <Spacer marginTop={16} marginBottom={1}>\n <Anchor pseudo onClick={this.toggle}>\n {isUnFolded ? lessText : moreText}\n </Anchor>\n </Spacer>\n )}\n </div>\n )\n }\n}\n"],"names":["TextEllipse","Component","constructor","props","super","this","getContent","content","chars","isEllipsed","state","text","isUnFolded","length","slice","leftChars","index","concat","setTimeout","setState","_jsx","Text","getQuted","Styled.Ul","children","map","item","Styled.Li","_objectSpread","display","quoted","toggle","componentDidUpdate","_ref","render","_this$props","className","style","moreText","lessText","showToggler","restProps","_objectWithoutProperties","_excluded","_jsxs","Spacer","marginTop","marginBottom","Anchor","pseudo","onClick","displayName"],"mappings":"+aAmCO,MAAMA,UAAoBC,EAG/BC,YAAYC,GACVC,MAAMD,GAD6BE,KAerCC,WAAcH,IACZ,IAAMI,QAAEA,EAAFC,MAAWA,EAAQ,GAAMH,KAAKF,MAEpC,IAAKI,EAAS,MAAO,GAErB,IAAIE,WAAEA,GAAeJ,KAAKK,MAC1B,IAAIC,EAA6C,iBAAZJ,EAAuB,GAAK,GAEjE,GAAKF,KAAKK,MAAME,WAsBdD,EAAOJ,OArBP,GAAoB,iBAATI,EAGTA,GAFAF,EAAuB,IAAVD,GAAeD,EAAQM,OAASL,IAEd,IAAVA,EAAiBD,GAAAA,OAAAA,EAAQO,MAAM,EAAGN,UAAcD,MAChE,CACL,IAAIQ,EAAYP,EAEhB,IAAK,IAAIQ,EAAQ,EAAGA,EAAQT,EAAQM,OAAQG,IAAS,CACnD,KAAID,EAAYR,EAAQS,GAAOH,OAAS,GAIjC,CACLJ,KACAE,EAAKK,GAAL,GAAAC,OAAiBV,EAAQS,GAAOF,MAAM,EAAGC,GAAzC,OAEA,MAPAA,GAAaR,EAAQS,GAAOH,OAE5BF,EAAKK,GAAST,EAAQS,IAe9B,OAFIX,KAAKK,MAAMD,aAAeA,GAAYS,YAAAA,IAAiBb,KAAKc,SAAS,CAAEV,WAAAA,MAEpD,iBAATE,EACZS,EAACC,SAASlB,GAAV,GAAA,CAAiBI,QAASF,KAAKiB,SAASX,MAExCS,EAACG,EAAD,CAAAC,SACGb,EAAKc,KAAAA,CAAKC,EAAMV,IACfI,EAACO,EAAD,CAAAH,SACEJ,EAACC,EAADO,EAAAA,EAAA,GAAUzB,GAAV,GAAA,CAAiB0B,QAAQ,SAAStB,QAASmB,MAD7BV,QAvDaX,KA+DrCiB,SAAYf,GAAqBF,KAAKF,MAAM2B,OAAX,IAAAb,OAAwBV,EAAxB,KAAqCA,EA/DjCF,KAiErC0B,OAAS,KACP1B,KAAKc,SAAS,CAAEP,YAAaP,KAAKK,MAAME,cA/DxCP,KAAKK,MAAQ,CACXE,YAAAA,EACAH,YAAAA,GAIJuB,mBAAkDC,GAAA,IAA/B1B,QAAEA,GAA6B0B,EAC5C1B,IAAYF,KAAKF,MAAMI,SAAWF,KAAKK,MAAME,YAC/CP,KAAK0B,SA0DTG,SACE,IAAAC,EAOI9B,KAAKF,OAPHiC,UACJA,EAAY,GADRC,MAEJA,EAFIC,SAGJA,EAAW,mBAHPC,SAIJA,EAAW,WAJPC,YAKJA,GAAc,GALhBL,EAMKM,EANLC,EAAAP,EAAAQ,GAQA,IAAM/B,WAAEA,EAAFH,WAAcA,GAAeJ,KAAKK,MAExC,OACEkC,EAAA,MAAA,CAAKR,UAAWA,EAAWC,MAAOA,EAAlCb,SACG,CAAAnB,KAAKC,WAAWmC,GAChBD,GAAe/B,GACdW,EAACyB,EAAD,CAAQC,UAAW,GAAIC,aAAc,EAArCvB,SACEJ,EAAC4B,EAAD,CAAQC,UAAOC,QAAS7C,KAAK0B,OAA7BP,SACGZ,EAAa2B,EAAWD,UAzF1BtC,EACJmD,YAAc"}
|
package/dts/index.d.ts
CHANGED
|
@@ -1107,6 +1107,11 @@ interface ButtonProps extends BaseProps, Tooltiped, Display, Color, Color<'fontC
|
|
|
1107
1107
|
* Size
|
|
1108
1108
|
*/
|
|
1109
1109
|
size?: keyof typeof PROPS_BY_SIZE;
|
|
1110
|
+
/**
|
|
1111
|
+
* Content of button
|
|
1112
|
+
* @deprecated Use children property
|
|
1113
|
+
*/
|
|
1114
|
+
content?: React.ReactNode;
|
|
1110
1115
|
}
|
|
1111
1116
|
/**
|
|
1112
1117
|
* Расширен:
|