@skbkontur/react-ui 3.11.0-select-right → 3.11.0-select-right-2
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/cjs/components/Autocomplete/Autocomplete.md +7 -7
- package/cjs/components/CurrencyInput/CurrencyInput.md +24 -24
- package/cjs/components/DateInput/DateInput.md +106 -106
- package/cjs/components/DatePicker/DatePicker.md +307 -307
- package/cjs/components/FxInput/FxInput.md +16 -16
- package/cjs/components/Group/Group.md +18 -18
- package/cjs/components/Paging/Paging.md +43 -43
- package/cjs/components/Select/Select.js +2 -1
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/Tabs/Tabs.md +36 -36
- package/cjs/components/Textarea/Textarea.md +25 -25
- package/cjs/components/TokenInput/TokenInput.md +79 -79
- package/cjs/internal/DropdownContainer/DropdownContainer.d.ts +1 -0
- package/cjs/internal/DropdownContainer/DropdownContainer.js +6 -1
- package/cjs/internal/DropdownContainer/DropdownContainer.js.map +1 -1
- package/cjs/internal/Menu/Menu.styles.js +1 -1
- package/cjs/internal/Menu/Menu.styles.js.map +1 -1
- package/components/Autocomplete/Autocomplete.md +7 -7
- package/components/CurrencyInput/CurrencyInput.md +24 -24
- package/components/DateInput/DateInput.md +106 -106
- package/components/DatePicker/DatePicker.md +307 -307
- package/components/FxInput/FxInput.md +16 -16
- package/components/Group/Group.md +18 -18
- package/components/Paging/Paging.md +43 -43
- package/components/Select/Select/Select.js +2 -1
- package/components/Select/Select/Select.js.map +1 -1
- package/components/Tabs/Tabs.md +36 -36
- package/components/Textarea/Textarea.md +25 -25
- package/components/TokenInput/TokenInput.md +79 -79
- package/internal/DropdownContainer/DropdownContainer/DropdownContainer.js +4 -2
- package/internal/DropdownContainer/DropdownContainer/DropdownContainer.js.map +1 -1
- package/internal/DropdownContainer/DropdownContainer.d.ts +1 -0
- package/internal/Menu/Menu.styles/Menu.styles.js +1 -1
- package/internal/Menu/Menu.styles/Menu.styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -6,6 +6,7 @@ var _ZIndex = require("../ZIndex");
|
|
|
6
6
|
var _createPropsGetter = require("../../lib/createPropsGetter");
|
|
7
7
|
|
|
8
8
|
var _Emotion = require("../../lib/theming/Emotion");
|
|
9
|
+
var _client = require("../../lib/client");
|
|
9
10
|
|
|
10
11
|
var _DropdownContainer = require("./DropdownContainer.styles");var
|
|
11
12
|
|
|
@@ -29,6 +30,7 @@ var _DropdownContainer = require("./DropdownContainer.styles");var
|
|
|
29
30
|
|
|
30
31
|
|
|
31
32
|
|
|
33
|
+
|
|
32
34
|
|
|
33
35
|
|
|
34
36
|
DropdownContainer = /*#__PURE__*/function (_React$PureComponent) {(0, _inheritsLoose2.default)(DropdownContainer, _React$PureComponent);function DropdownContainer() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;_this.
|
|
@@ -99,6 +101,9 @@ DropdownContainer = /*#__PURE__*/function (_React$PureComponent) {(0, _inheritsL
|
|
|
99
101
|
|
|
100
102
|
|
|
101
103
|
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
102
107
|
|
|
103
108
|
|
|
104
109
|
|
|
@@ -202,4 +207,4 @@ DropdownContainer = /*#__PURE__*/function (_React$PureComponent) {(0, _inheritsL
|
|
|
202
207
|
left: offsetX,
|
|
203
208
|
right: null };
|
|
204
209
|
|
|
205
|
-
};return _this;}var _proto = DropdownContainer.prototype;_proto.componentDidMount = function componentDidMount() {this.position();this.layoutSub = LayoutEvents.addListener(this.position);var _document2 = document,body = _document2.body,docEl = _document2.documentElement;var htmlPosition = getComputedStyle(docEl).position;var bodyPosition = getComputedStyle(body).position;var hasLimitedHeightRoot = body.scrollHeight > body.clientHeight;var hasStaticRoot = htmlPosition === 'static' && bodyPosition === 'static';this.setState({ isDocumentElementRoot: hasLimitedHeightRoot || hasStaticRoot });};_proto.componentWillUnmount = function componentWillUnmount() {if (this.layoutSub) {this.layoutSub.remove();}};_proto.render = function render() {var _cx;var style = { position: 'absolute', top: '0' };if (this.state.position) {var _this$state$position = this.state.position,top = _this$state$position.top,bottom = _this$state$position.bottom,left = _this$state$position.left,right = _this$state$position.right;style = (0, _extends2.default)({}, style, { top: top !== null ? top : undefined, bottom: bottom !== null ? bottom : undefined, left: left !== null ? left : undefined, right: right !== null ? right : undefined, minWidth: this.state.minWidth });}var content = /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'DropdownContainer', wrapperRef: this.ZIndexRef, style: style, className: (0, _Emotion.cx)((_cx = {}, _cx[_DropdownContainer.styles.alignRight()] =
|
|
210
|
+
};return _this;}var _proto = DropdownContainer.prototype;_proto.componentDidMount = function componentDidMount() {this.position();this.layoutSub = LayoutEvents.addListener(this.position);var _document2 = document,body = _document2.body,docEl = _document2.documentElement;var htmlPosition = getComputedStyle(docEl).position;var bodyPosition = getComputedStyle(body).position;var hasLimitedHeightRoot = body.scrollHeight > body.clientHeight;var hasStaticRoot = htmlPosition === 'static' && bodyPosition === 'static';this.setState({ isDocumentElementRoot: hasLimitedHeightRoot || hasStaticRoot });};_proto.componentWillUnmount = function componentWillUnmount() {if (this.layoutSub) {this.layoutSub.remove();}};_proto.render = function render() {var _cx;var style = { position: 'absolute', top: '0' };if (this.state.position) {var _this$state$position = this.state.position,top = _this$state$position.top,bottom = _this$state$position.bottom,left = _this$state$position.left,right = _this$state$position.right;style = (0, _extends2.default)({}, style, { top: top !== null ? top : undefined, bottom: bottom !== null ? bottom : undefined, left: left !== null ? left : undefined, right: right !== null ? right : undefined, minWidth: this.state.minWidth, maxWidth: this.props.fixedWidth ? this.state.minWidth : undefined });}var content = /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'DropdownContainer', wrapperRef: this.ZIndexRef, style: style, className: (0, _Emotion.cx)((_cx = {}, _cx[_DropdownContainer.styles.alignRight()] = this.props.align === 'right' && !_client.isIE11, _cx)) }, this.props.children);return this.props.disablePortal ? content : /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, content);};return DropdownContainer;}(_react.default.PureComponent);exports.DropdownContainer = DropdownContainer;DropdownContainer.__KONTUR_REACT_UI__ = 'DropdownContainer';DropdownContainer.defaultProps = { align: 'left', disablePortal: false, offsetX: 0, offsetY: -1 };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["DropdownContainer.tsx"],"names":["DropdownContainer","state","position","minWidth","isDocumentElementRoot","getProps","defaultProps","dom","layoutSub","ZIndexRef","element","isElement","node","Element","target","props","getParent","targetRect","getBoundingClientRect","document","body","docEl","documentElement","Error","scrollX","window","pageXOffset","scrollLeft","scrollY","pageYOffset","scrollTop","left","right","align","docWidth","offsetWidth","offsetX","offsetY","bottom","top","distanceToBottom","clientHeight","dropdownHeight","getHeight","scrollHeight","setState","getMinWidth","disablePortal","convertToRelativePosition","child","children","item","height","width","targetHeight","componentDidMount","LayoutEvents","addListener","htmlPosition","getComputedStyle","bodyPosition","hasLimitedHeightRoot","hasStaticRoot","componentWillUnmount","remove","render","style","undefined","content","styles","alignRight","React","PureComponent","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { RenderContainer } from '../RenderContainer';\nimport { ZIndex } from '../ZIndex';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { Nullable } from '../../typings/utility-types';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './DropdownContainer.styles';\n\nexport interface DropdownContainerPosition {\n top: Nullable<number>;\n bottom: Nullable<number>;\n left: Nullable<number>;\n right: Nullable<number>;\n}\n\nexport interface DropdownContainerProps {\n align?: 'left' | 'right';\n getParent: () => Nullable<HTMLElement>;\n children?: React.ReactNode;\n disablePortal?: boolean;\n offsetY?: number;\n offsetX?: number;\n}\n\nexport interface DropdownContainerState {\n position: Nullable<DropdownContainerPosition>;\n minWidth: number;\n isDocumentElementRoot?: boolean;\n}\n\nexport class DropdownContainer extends React.PureComponent<DropdownContainerProps, DropdownContainerState> {\n public static __KONTUR_REACT_UI__ = 'DropdownContainer';\n\n public static defaultProps = {\n align: 'left',\n disablePortal: false,\n offsetX: 0,\n offsetY: -1,\n };\n\n public state: DropdownContainerState = {\n position: null,\n minWidth: 0,\n isDocumentElementRoot: true,\n };\n\n private getProps = createPropsGetter(DropdownContainer.defaultProps);\n\n private dom: Nullable<HTMLDivElement>;\n private layoutSub: Nullable<ReturnType<typeof LayoutEvents.addListener>>;\n\n public componentDidMount() {\n this.position();\n this.layoutSub = LayoutEvents.addListener(this.position);\n\n const { body, documentElement: docEl } = document;\n const htmlPosition = getComputedStyle(docEl).position;\n const bodyPosition = getComputedStyle(body).position;\n\n const hasLimitedHeightRoot = body.scrollHeight > body.clientHeight;\n const hasStaticRoot = htmlPosition === 'static' && bodyPosition === 'static';\n\n this.setState({ isDocumentElementRoot: hasLimitedHeightRoot || hasStaticRoot });\n }\n\n public componentWillUnmount() {\n if (this.layoutSub) {\n this.layoutSub.remove();\n }\n }\n\n public render() {\n let style: React.CSSProperties = {\n position: 'absolute',\n top: '0',\n };\n if (this.state.position) {\n const { top, bottom, left, right } = this.state.position;\n style = {\n ...style,\n top: top !== null ? top : undefined,\n bottom: bottom !== null ? bottom : undefined,\n left: left !== null ? left : undefined,\n right: right !== null ? right : undefined,\n minWidth: this.state.minWidth,\n };\n }\n\n const content = (\n <ZIndex\n priority={'DropdownContainer'}\n wrapperRef={this.ZIndexRef}\n style={style}\n className={cx({ [styles.alignRight()]: !this.props.disablePortal && this.props.align === 'right' })}\n >\n {this.props.children}\n </ZIndex>\n );\n\n return this.props.disablePortal ? content : <RenderContainer>{content}</RenderContainer>;\n }\n\n private ZIndexRef = (element: Nullable<HTMLDivElement>) => {\n this.dom = element;\n };\n\n private isElement = (node: Nullable<Element>): node is Element => {\n return node instanceof Element;\n };\n\n public position = () => {\n const target = this.props.getParent();\n const dom = this.dom;\n\n if (target && this.isElement(target) && dom) {\n const targetRect = target.getBoundingClientRect();\n const { body, documentElement: docEl } = document;\n\n if (!docEl) {\n throw Error('There is no \"documentElement\" in \"document\"');\n }\n\n const scrollX = window.pageXOffset || docEl.scrollLeft || 0;\n const scrollY = window.pageYOffset || docEl.scrollTop || 0;\n\n let left = null;\n let right = null;\n\n if (this.props.align === 'right') {\n const docWidth = docEl.offsetWidth || 0;\n right = docWidth - (targetRect.right + scrollX) + this.getProps().offsetX;\n } else {\n left = targetRect.left + scrollX + this.getProps().offsetX;\n }\n\n const { offsetY = 0 } = this.props;\n let bottom = null;\n let top: number | null = targetRect.bottom + scrollY + offsetY;\n\n const distanceToBottom = docEl.clientHeight - targetRect.bottom;\n const dropdownHeight = this.getHeight();\n\n if (distanceToBottom < dropdownHeight && targetRect.top > dropdownHeight) {\n const clientHeight = this.state.isDocumentElementRoot ? docEl.clientHeight : body.scrollHeight;\n\n top = null;\n bottom = clientHeight + offsetY - scrollY - targetRect.top;\n }\n\n const position = {\n top,\n left,\n right,\n bottom,\n };\n\n this.setState({\n minWidth: this.getMinWidth(),\n position: this.props.disablePortal ? this.convertToRelativePosition(position) : position,\n });\n }\n };\n\n private getHeight = () => {\n if (!this.isElement(this.dom)) {\n return 0;\n }\n const child = this.dom.children.item(0);\n if (!child) {\n return 0;\n }\n return child.getBoundingClientRect().height;\n };\n\n private getMinWidth = () => {\n const target = this.props.getParent();\n if (!target || !this.isElement(target)) {\n return 0;\n }\n return target.getBoundingClientRect().width;\n };\n\n private convertToRelativePosition = (position: DropdownContainerPosition): DropdownContainerPosition => {\n const target = this.props.getParent();\n const { offsetX = 0, offsetY = 0 } = this.props;\n const { top, bottom, left, right } = position;\n if (target && this.isElement(target)) {\n const targetHeight = target.getBoundingClientRect().height;\n return {\n top: top !== null ? targetHeight + offsetY : null,\n bottom: bottom !== null ? targetHeight + offsetY : null,\n left: left !== null ? offsetX : null,\n right: right !== null ? offsetX : null,\n };\n }\n return {\n top: offsetY,\n bottom: null,\n left: offsetX,\n right: null,\n };\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["DropdownContainer.tsx"],"names":["DropdownContainer","state","position","minWidth","isDocumentElementRoot","getProps","defaultProps","dom","layoutSub","ZIndexRef","element","isElement","node","Element","target","props","getParent","targetRect","getBoundingClientRect","document","body","docEl","documentElement","Error","scrollX","window","pageXOffset","scrollLeft","scrollY","pageYOffset","scrollTop","left","right","align","docWidth","offsetWidth","offsetX","offsetY","bottom","top","distanceToBottom","clientHeight","dropdownHeight","getHeight","scrollHeight","setState","getMinWidth","disablePortal","convertToRelativePosition","child","children","item","height","width","targetHeight","componentDidMount","LayoutEvents","addListener","htmlPosition","getComputedStyle","bodyPosition","hasLimitedHeightRoot","hasStaticRoot","componentWillUnmount","remove","render","style","undefined","maxWidth","fixedWidth","content","styles","alignRight","isIE11","React","PureComponent","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { RenderContainer } from '../RenderContainer';\nimport { ZIndex } from '../ZIndex';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { Nullable } from '../../typings/utility-types';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isIE11 } from '../../lib/client';\n\nimport { styles } from './DropdownContainer.styles';\n\nexport interface DropdownContainerPosition {\n top: Nullable<number>;\n bottom: Nullable<number>;\n left: Nullable<number>;\n right: Nullable<number>;\n}\n\nexport interface DropdownContainerProps {\n align?: 'left' | 'right';\n getParent: () => Nullable<HTMLElement>;\n children?: React.ReactNode;\n disablePortal?: boolean;\n offsetY?: number;\n offsetX?: number;\n fixedWidth?: boolean;\n}\n\nexport interface DropdownContainerState {\n position: Nullable<DropdownContainerPosition>;\n minWidth: number;\n isDocumentElementRoot?: boolean;\n}\n\nexport class DropdownContainer extends React.PureComponent<DropdownContainerProps, DropdownContainerState> {\n public static __KONTUR_REACT_UI__ = 'DropdownContainer';\n\n public static defaultProps = {\n align: 'left',\n disablePortal: false,\n offsetX: 0,\n offsetY: -1,\n };\n\n public state: DropdownContainerState = {\n position: null,\n minWidth: 0,\n isDocumentElementRoot: true,\n };\n\n private getProps = createPropsGetter(DropdownContainer.defaultProps);\n\n private dom: Nullable<HTMLDivElement>;\n private layoutSub: Nullable<ReturnType<typeof LayoutEvents.addListener>>;\n\n public componentDidMount() {\n this.position();\n this.layoutSub = LayoutEvents.addListener(this.position);\n\n const { body, documentElement: docEl } = document;\n const htmlPosition = getComputedStyle(docEl).position;\n const bodyPosition = getComputedStyle(body).position;\n\n const hasLimitedHeightRoot = body.scrollHeight > body.clientHeight;\n const hasStaticRoot = htmlPosition === 'static' && bodyPosition === 'static';\n\n this.setState({ isDocumentElementRoot: hasLimitedHeightRoot || hasStaticRoot });\n }\n\n public componentWillUnmount() {\n if (this.layoutSub) {\n this.layoutSub.remove();\n }\n }\n\n public render() {\n let style: React.CSSProperties = {\n position: 'absolute',\n top: '0',\n };\n if (this.state.position) {\n const { top, bottom, left, right } = this.state.position;\n style = {\n ...style,\n top: top !== null ? top : undefined,\n bottom: bottom !== null ? bottom : undefined,\n left: left !== null ? left : undefined,\n right: right !== null ? right : undefined,\n minWidth: this.state.minWidth,\n maxWidth: this.props.fixedWidth ? this.state.minWidth : undefined,\n };\n }\n\n const content = (\n <ZIndex\n priority={'DropdownContainer'}\n wrapperRef={this.ZIndexRef}\n style={style}\n className={cx({\n [styles.alignRight()]: this.props.align === 'right' && !isIE11,\n })}\n >\n {this.props.children}\n </ZIndex>\n );\n\n return this.props.disablePortal ? content : <RenderContainer>{content}</RenderContainer>;\n }\n\n private ZIndexRef = (element: Nullable<HTMLDivElement>) => {\n this.dom = element;\n };\n\n private isElement = (node: Nullable<Element>): node is Element => {\n return node instanceof Element;\n };\n\n public position = () => {\n const target = this.props.getParent();\n const dom = this.dom;\n\n if (target && this.isElement(target) && dom) {\n const targetRect = target.getBoundingClientRect();\n const { body, documentElement: docEl } = document;\n\n if (!docEl) {\n throw Error('There is no \"documentElement\" in \"document\"');\n }\n\n const scrollX = window.pageXOffset || docEl.scrollLeft || 0;\n const scrollY = window.pageYOffset || docEl.scrollTop || 0;\n\n let left = null;\n let right = null;\n\n if (this.props.align === 'right') {\n const docWidth = docEl.offsetWidth || 0;\n right = docWidth - (targetRect.right + scrollX) + this.getProps().offsetX;\n } else {\n left = targetRect.left + scrollX + this.getProps().offsetX;\n }\n\n const { offsetY = 0 } = this.props;\n let bottom = null;\n let top: number | null = targetRect.bottom + scrollY + offsetY;\n\n const distanceToBottom = docEl.clientHeight - targetRect.bottom;\n const dropdownHeight = this.getHeight();\n\n if (distanceToBottom < dropdownHeight && targetRect.top > dropdownHeight) {\n const clientHeight = this.state.isDocumentElementRoot ? docEl.clientHeight : body.scrollHeight;\n\n top = null;\n bottom = clientHeight + offsetY - scrollY - targetRect.top;\n }\n\n const position = {\n top,\n left,\n right,\n bottom,\n };\n\n this.setState({\n minWidth: this.getMinWidth(),\n position: this.props.disablePortal ? this.convertToRelativePosition(position) : position,\n });\n }\n };\n\n private getHeight = () => {\n if (!this.isElement(this.dom)) {\n return 0;\n }\n const child = this.dom.children.item(0);\n if (!child) {\n return 0;\n }\n return child.getBoundingClientRect().height;\n };\n\n private getMinWidth = () => {\n const target = this.props.getParent();\n if (!target || !this.isElement(target)) {\n return 0;\n }\n return target.getBoundingClientRect().width;\n };\n\n private convertToRelativePosition = (position: DropdownContainerPosition): DropdownContainerPosition => {\n const target = this.props.getParent();\n const { offsetX = 0, offsetY = 0 } = this.props;\n const { top, bottom, left, right } = position;\n if (target && this.isElement(target)) {\n const targetHeight = target.getBoundingClientRect().height;\n return {\n top: top !== null ? targetHeight + offsetY : null,\n bottom: bottom !== null ? targetHeight + offsetY : null,\n left: left !== null ? offsetX : null,\n right: right !== null ? offsetX : null,\n };\n }\n return {\n top: offsetY,\n bottom: null,\n left: offsetX,\n right: null,\n };\n };\n}\n"]}
|
|
@@ -19,7 +19,7 @@ var styles = (0, _Emotion.memoizeStyle)({
|
|
|
19
19
|
},
|
|
20
20
|
|
|
21
21
|
alignRightIE11: function alignRightIE11() {
|
|
22
|
-
return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n
|
|
22
|
+
return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n float: right;\n "])));
|
|
23
23
|
|
|
24
24
|
|
|
25
25
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Menu.styles.ts"],"names":["styles","root","t","css","menuBgDefault","menuPaddingY","alignRight","alignRightIE11","alignRightIE11DefaultWidth","scrollContainer","shadow","menuBorder","menuShadow"],"mappings":"4QAAA;;AAEA,8D;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACE,aADlB;;;AAIa,kCAAWF,CAAX,IAAgB,CAAhB,GAAoBA,CAAC,CAACG,YAJnC;;AAMD,GARgC;;AAUjCC,EAAAA,UAViC,wBAUpB;AACX,eAAOH,YAAP;;;AAGD,GAdgC;;AAgBjCI,EAAAA,cAhBiC,4BAgBhB;AACf,eAAOJ,YAAP;;;AAGD,GApBgC;;AAsBjCK,EAAAA,0BAtBiC,wCAsBJ;AAC3B,eAAOL,YAAP;;;;AAID,GA3BgC;;AA6BjCM,EAAAA,eA7BiC,2BA6BjBP,CA7BiB,EA6BP;AACxB,eAAOC,YAAP;AACa,kCAAWD,CAAX,IAAgBA,CAAC,CAACG,YAAlB,GAAiC,CAD9C;;AAGD,GAjCgC;;AAmCjCK,EAAAA,MAnCiC,kBAmC1BR,CAnC0B,EAmChB;AACf,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACS,UADd;AAEgBT,IAAAA,CAAC,CAACU,UAFlB;;AAID,GAxCgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { is8pxTheme } from '../../lib/theming/ThemeHelpers';\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n return css`\n background: ${t.menuBgDefault};\n box-sizing: content-box;\n overflow: auto;\n padding: ${is8pxTheme(t) ? 0 : t.menuPaddingY} 0;\n `;\n },\n\n alignRight() {\n return css`\n flex: 1 1 100%;\n `;\n },\n\n alignRightIE11() {\n return css`\n
|
|
1
|
+
{"version":3,"sources":["Menu.styles.ts"],"names":["styles","root","t","css","menuBgDefault","menuPaddingY","alignRight","alignRightIE11","alignRightIE11DefaultWidth","scrollContainer","shadow","menuBorder","menuShadow"],"mappings":"4QAAA;;AAEA,8D;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACE,aADlB;;;AAIa,kCAAWF,CAAX,IAAgB,CAAhB,GAAoBA,CAAC,CAACG,YAJnC;;AAMD,GARgC;;AAUjCC,EAAAA,UAViC,wBAUpB;AACX,eAAOH,YAAP;;;AAGD,GAdgC;;AAgBjCI,EAAAA,cAhBiC,4BAgBhB;AACf,eAAOJ,YAAP;;;AAGD,GApBgC;;AAsBjCK,EAAAA,0BAtBiC,wCAsBJ;AAC3B,eAAOL,YAAP;;;;AAID,GA3BgC;;AA6BjCM,EAAAA,eA7BiC,2BA6BjBP,CA7BiB,EA6BP;AACxB,eAAOC,YAAP;AACa,kCAAWD,CAAX,IAAgBA,CAAC,CAACG,YAAlB,GAAiC,CAD9C;;AAGD,GAjCgC;;AAmCjCK,EAAAA,MAnCiC,kBAmC1BR,CAnC0B,EAmChB;AACf,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACS,UADd;AAEgBT,IAAAA,CAAC,CAACU,UAFlB;;AAID,GAxCgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { is8pxTheme } from '../../lib/theming/ThemeHelpers';\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n return css`\n background: ${t.menuBgDefault};\n box-sizing: content-box;\n overflow: auto;\n padding: ${is8pxTheme(t) ? 0 : t.menuPaddingY} 0;\n `;\n },\n\n alignRight() {\n return css`\n flex: 1 1 100%;\n `;\n },\n\n alignRightIE11() {\n return css`\n float: right;\n `;\n },\n\n alignRightIE11DefaultWidth() {\n return css`\n box-sizing: border-box !important; // override root styles\n overflow: hidden !important; // override root styles\n `;\n },\n\n scrollContainer(t: Theme) {\n return css`\n padding: ${is8pxTheme(t) ? t.menuPaddingY : 0} 0;\n `;\n },\n\n shadow(t: Theme) {\n return css`\n border: ${t.menuBorder};\n box-shadow: ${t.menuShadow};\n `;\n },\n});\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
```jsx harmony
|
|
2
|
-
let items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
|
|
3
|
-
|
|
4
|
-
const [value, setValue] = React.useState('Kappa');
|
|
5
|
-
|
|
6
|
-
<Autocomplete source={items} value={value} onValueChange={setValue} />;
|
|
7
|
-
```
|
|
1
|
+
```jsx harmony
|
|
2
|
+
let items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
|
|
3
|
+
|
|
4
|
+
const [value, setValue] = React.useState('Kappa');
|
|
5
|
+
|
|
6
|
+
<Autocomplete source={items} value={value} onValueChange={setValue} />;
|
|
7
|
+
```
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
```jsx harmony
|
|
2
|
-
const [value, setValue] = React.useState();
|
|
3
|
-
|
|
4
|
-
<CurrencyInput value={value} fractionDigits={3} onValueChange={setValue} />
|
|
5
|
-
```
|
|
6
|
-
|
|
7
|
-
`fractionDigits={15}`
|
|
8
|
-
|
|
9
|
-
```jsx harmony
|
|
10
|
-
const [value, setValue] = React.useState();
|
|
11
|
-
|
|
12
|
-
<CurrencyInput value={value} fractionDigits={15} onValueChange={setValue} />
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
---
|
|
16
|
-
|
|
17
|
-
### <a name="/CurrencyInput?id=why15" href="#/CurrencyInput?id=why15">Почему 15?</a>
|
|
18
|
-
|
|
19
|
-
Максимальное безопасное целочисленное значение - `9007199254740991` (16 цифр).
|
|
20
|
-
Убрав один разряд, мы получим "новое" максимальное безопасное значение - **`999999999999999` (15 цифр)**.
|
|
21
|
-
|
|
22
|
-
При этом десятичный резделитель может находиться в любом месте. Если целая часть равна `0`, то она не учитывается.
|
|
23
|
-
|
|
24
|
-
_Детали можно почитать здесь - <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER">MDN web docs</a>_
|
|
1
|
+
```jsx harmony
|
|
2
|
+
const [value, setValue] = React.useState();
|
|
3
|
+
|
|
4
|
+
<CurrencyInput value={value} fractionDigits={3} onValueChange={setValue} />
|
|
5
|
+
```
|
|
6
|
+
|
|
7
|
+
`fractionDigits={15}`
|
|
8
|
+
|
|
9
|
+
```jsx harmony
|
|
10
|
+
const [value, setValue] = React.useState();
|
|
11
|
+
|
|
12
|
+
<CurrencyInput value={value} fractionDigits={15} onValueChange={setValue} />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
### <a name="/CurrencyInput?id=why15" href="#/CurrencyInput?id=why15">Почему 15?</a>
|
|
18
|
+
|
|
19
|
+
Максимальное безопасное целочисленное значение - `9007199254740991` (16 цифр).
|
|
20
|
+
Убрав один разряд, мы получим "новое" максимальное безопасное значение - **`999999999999999` (15 цифр)**.
|
|
21
|
+
|
|
22
|
+
При этом десятичный резделитель может находиться в любом месте. Если целая часть равна `0`, то она не учитывается.
|
|
23
|
+
|
|
24
|
+
_Детали можно почитать здесь - <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER">MDN web docs</a>_
|
|
@@ -1,106 +1,106 @@
|
|
|
1
|
-
```jsx harmony
|
|
2
|
-
<DateInput value="27.04.1992" />
|
|
3
|
-
```
|
|
4
|
-
|
|
5
|
-
```jsx harmony
|
|
6
|
-
const [value, setValue] = React.useState();
|
|
7
|
-
|
|
8
|
-
<DateInput value={value} onValueChange={setValue} />
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
```jsx harmony
|
|
12
|
-
<DateInput disabled value="27.04.1992" />
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
### Форматирование даты при смене локали
|
|
16
|
-
|
|
17
|
-
```jsx harmony
|
|
18
|
-
import { Gapped, LangCodes, LocaleContext, Select } from '@skbkontur/react-ui';
|
|
19
|
-
|
|
20
|
-
class DateInputFormatting2 extends React.Component {
|
|
21
|
-
constructor() {
|
|
22
|
-
this.state = {
|
|
23
|
-
langCode: LangCodes.ru_RU,
|
|
24
|
-
value: '21.12.2012',
|
|
25
|
-
};
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
render() {
|
|
29
|
-
return (
|
|
30
|
-
<Gapped vertical gap={10}>
|
|
31
|
-
<div>
|
|
32
|
-
<span style={{ width: '300px', display: 'inline-block' }}>
|
|
33
|
-
Локаль (<tt>LangCodes</tt>)
|
|
34
|
-
</span>
|
|
35
|
-
<Select
|
|
36
|
-
value={this.state.langCode}
|
|
37
|
-
placeholder="Выбрать язык"
|
|
38
|
-
items={Object.values(LangCodes)}
|
|
39
|
-
onValueChange={langCode => this.setState({ langCode })}
|
|
40
|
-
/>
|
|
41
|
-
</div>
|
|
42
|
-
<LocaleContext.Provider value={{ langCode: this.state.langCode }}>
|
|
43
|
-
<DateInput onValueChange={value => this.setState({ value })} value={this.state.value} />
|
|
44
|
-
</LocaleContext.Provider>
|
|
45
|
-
</Gapped>
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
<DateInputFormatting2 />;
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
### Ручное форматирование даты
|
|
54
|
-
|
|
55
|
-
```jsx harmony
|
|
56
|
-
import { DateOrder, DateSeparator, Gapped, LocaleContext, Select } from '@skbkontur/react-ui';
|
|
57
|
-
|
|
58
|
-
class DateInputFormatting extends React.Component {
|
|
59
|
-
constructor() {
|
|
60
|
-
this.state = {
|
|
61
|
-
order: DateOrder.YMD,
|
|
62
|
-
separator: 'Dot',
|
|
63
|
-
value: '21.12.2012',
|
|
64
|
-
};
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
render() {
|
|
68
|
-
return (
|
|
69
|
-
<Gapped vertical gap={10}>
|
|
70
|
-
<div>
|
|
71
|
-
<span style={{ width: '300px', display: 'inline-block' }}>
|
|
72
|
-
Порядок компонентов (<tt>DateOrder</tt>)
|
|
73
|
-
</span>
|
|
74
|
-
<Select
|
|
75
|
-
value={this.state.order}
|
|
76
|
-
items={Object.keys(DateOrder)}
|
|
77
|
-
onValueChange={order => this.setState({ order })}
|
|
78
|
-
/>
|
|
79
|
-
</div>
|
|
80
|
-
<div>
|
|
81
|
-
<span style={{ width: '300px', display: 'inline-block' }}>
|
|
82
|
-
Разделитель (<tt>DateSeparator</tt>)
|
|
83
|
-
</span>
|
|
84
|
-
<Select
|
|
85
|
-
value={this.state.separator}
|
|
86
|
-
items={Object.keys(DateSeparator)}
|
|
87
|
-
onValueChange={separator => this.setState({ separator })}
|
|
88
|
-
/>
|
|
89
|
-
</div>
|
|
90
|
-
<LocaleContext.Provider value={{
|
|
91
|
-
locale:{
|
|
92
|
-
DatePicker: {
|
|
93
|
-
separator: DateSeparator[this.state.separator],
|
|
94
|
-
order: this.state.order,
|
|
95
|
-
},
|
|
96
|
-
}}}
|
|
97
|
-
>
|
|
98
|
-
<DateInput onValueChange={value => this.setState({ value })} value={this.state.value} />
|
|
99
|
-
</LocaleContext.Provider>
|
|
100
|
-
</Gapped>
|
|
101
|
-
);
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
<DateInputFormatting />;
|
|
106
|
-
```
|
|
1
|
+
```jsx harmony
|
|
2
|
+
<DateInput value="27.04.1992" />
|
|
3
|
+
```
|
|
4
|
+
|
|
5
|
+
```jsx harmony
|
|
6
|
+
const [value, setValue] = React.useState();
|
|
7
|
+
|
|
8
|
+
<DateInput value={value} onValueChange={setValue} />
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
```jsx harmony
|
|
12
|
+
<DateInput disabled value="27.04.1992" />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Форматирование даты при смене локали
|
|
16
|
+
|
|
17
|
+
```jsx harmony
|
|
18
|
+
import { Gapped, LangCodes, LocaleContext, Select } from '@skbkontur/react-ui';
|
|
19
|
+
|
|
20
|
+
class DateInputFormatting2 extends React.Component {
|
|
21
|
+
constructor() {
|
|
22
|
+
this.state = {
|
|
23
|
+
langCode: LangCodes.ru_RU,
|
|
24
|
+
value: '21.12.2012',
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
render() {
|
|
29
|
+
return (
|
|
30
|
+
<Gapped vertical gap={10}>
|
|
31
|
+
<div>
|
|
32
|
+
<span style={{ width: '300px', display: 'inline-block' }}>
|
|
33
|
+
Локаль (<tt>LangCodes</tt>)
|
|
34
|
+
</span>
|
|
35
|
+
<Select
|
|
36
|
+
value={this.state.langCode}
|
|
37
|
+
placeholder="Выбрать язык"
|
|
38
|
+
items={Object.values(LangCodes)}
|
|
39
|
+
onValueChange={langCode => this.setState({ langCode })}
|
|
40
|
+
/>
|
|
41
|
+
</div>
|
|
42
|
+
<LocaleContext.Provider value={{ langCode: this.state.langCode }}>
|
|
43
|
+
<DateInput onValueChange={value => this.setState({ value })} value={this.state.value} />
|
|
44
|
+
</LocaleContext.Provider>
|
|
45
|
+
</Gapped>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
<DateInputFormatting2 />;
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Ручное форматирование даты
|
|
54
|
+
|
|
55
|
+
```jsx harmony
|
|
56
|
+
import { DateOrder, DateSeparator, Gapped, LocaleContext, Select } from '@skbkontur/react-ui';
|
|
57
|
+
|
|
58
|
+
class DateInputFormatting extends React.Component {
|
|
59
|
+
constructor() {
|
|
60
|
+
this.state = {
|
|
61
|
+
order: DateOrder.YMD,
|
|
62
|
+
separator: 'Dot',
|
|
63
|
+
value: '21.12.2012',
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
render() {
|
|
68
|
+
return (
|
|
69
|
+
<Gapped vertical gap={10}>
|
|
70
|
+
<div>
|
|
71
|
+
<span style={{ width: '300px', display: 'inline-block' }}>
|
|
72
|
+
Порядок компонентов (<tt>DateOrder</tt>)
|
|
73
|
+
</span>
|
|
74
|
+
<Select
|
|
75
|
+
value={this.state.order}
|
|
76
|
+
items={Object.keys(DateOrder)}
|
|
77
|
+
onValueChange={order => this.setState({ order })}
|
|
78
|
+
/>
|
|
79
|
+
</div>
|
|
80
|
+
<div>
|
|
81
|
+
<span style={{ width: '300px', display: 'inline-block' }}>
|
|
82
|
+
Разделитель (<tt>DateSeparator</tt>)
|
|
83
|
+
</span>
|
|
84
|
+
<Select
|
|
85
|
+
value={this.state.separator}
|
|
86
|
+
items={Object.keys(DateSeparator)}
|
|
87
|
+
onValueChange={separator => this.setState({ separator })}
|
|
88
|
+
/>
|
|
89
|
+
</div>
|
|
90
|
+
<LocaleContext.Provider value={{
|
|
91
|
+
locale:{
|
|
92
|
+
DatePicker: {
|
|
93
|
+
separator: DateSeparator[this.state.separator],
|
|
94
|
+
order: this.state.order,
|
|
95
|
+
},
|
|
96
|
+
}}}
|
|
97
|
+
>
|
|
98
|
+
<DateInput onValueChange={value => this.setState({ value })} value={this.state.value} />
|
|
99
|
+
</LocaleContext.Provider>
|
|
100
|
+
</Gapped>
|
|
101
|
+
);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
<DateInputFormatting />;
|
|
106
|
+
```
|