@doist/reactist 12.0.4 → 13.0.0
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/README.md +2 -0
- package/dist/reactist.cjs.development.js +153 -651
- package/dist/reactist.cjs.development.js.map +1 -1
- package/dist/reactist.cjs.production.min.js +1 -1
- package/dist/reactist.cjs.production.min.js.map +1 -1
- package/es/components/color-picker/color-picker.js +4 -4
- package/es/components/color-picker/color-picker.js.map +1 -1
- package/es/components/{dropdown → deprecated-dropdown}/dropdown.js +0 -0
- package/es/components/deprecated-dropdown/dropdown.js.map +1 -0
- package/es/components/{dropdown → deprecated-dropdown}/index.js +0 -0
- package/es/components/{checkbox → deprecated-dropdown}/index.js.map +0 -0
- package/es/components/{input → deprecated-input}/index.js +0 -0
- package/es/components/{dropdown → deprecated-input}/index.js.map +0 -0
- package/es/components/{input → deprecated-input}/input.js +0 -0
- package/es/components/deprecated-input/input.js.map +1 -0
- package/es/components/{select → deprecated-select}/index.js +0 -0
- package/es/components/{input → deprecated-select}/index.js.map +0 -0
- package/es/components/{select → deprecated-select}/select.js +0 -0
- package/es/components/deprecated-select/select.js.map +1 -0
- package/es/index.js +3 -7
- package/es/index.js.map +1 -1
- package/es/new-components/base-button/base-button.js +12 -9
- package/es/new-components/base-button/base-button.js.map +1 -1
- package/es/new-components/base-button/base-button.module.css.js +1 -1
- package/es/new-components/base-field/base-field.js +60 -16
- package/es/new-components/base-field/base-field.js.map +1 -1
- package/es/new-components/base-field/base-field.module.css.js +1 -1
- package/es/new-components/password-field/password-field.js +8 -2
- package/es/new-components/password-field/password-field.js.map +1 -1
- package/es/new-components/password-field/password-field.module.css.js +1 -1
- package/es/new-components/select-field/select-field.js +6 -2
- package/es/new-components/select-field/select-field.js.map +1 -1
- package/es/new-components/select-field/select-field.module.css.js +1 -1
- package/es/new-components/text/text.module.css.js +1 -1
- package/es/new-components/text-area/text-area.js +10 -3
- package/es/new-components/text-area/text-area.js.map +1 -1
- package/es/new-components/text-area/text-area.module.css.js +1 -1
- package/es/new-components/text-field/text-field.js +8 -2
- package/es/new-components/text-field/text-field.js.map +1 -1
- package/es/new-components/text-field/text-field.module.css.js +1 -1
- package/lib/components/color-picker/color-picker.js +1 -1
- package/lib/components/color-picker/color-picker.js.map +1 -1
- package/lib/components/{dropdown → deprecated-dropdown}/dropdown.d.ts +0 -0
- package/lib/components/{dropdown → deprecated-dropdown}/dropdown.js +0 -0
- package/lib/components/deprecated-dropdown/dropdown.js.map +1 -0
- package/lib/components/{dropdown → deprecated-dropdown}/dropdown.test.d.ts +0 -0
- package/lib/components/{dropdown → deprecated-dropdown}/index.d.ts +0 -0
- package/lib/components/{dropdown → deprecated-dropdown}/index.js +0 -0
- package/lib/components/{checkbox → deprecated-dropdown}/index.js.map +0 -0
- package/lib/components/{input → deprecated-input}/index.d.ts +0 -0
- package/lib/components/{input → deprecated-input}/index.js +0 -0
- package/lib/components/{dropdown → deprecated-input}/index.js.map +0 -0
- package/lib/components/{input → deprecated-input}/input.d.ts +0 -0
- package/lib/components/{input → deprecated-input}/input.js +0 -0
- package/lib/components/deprecated-input/input.js.map +1 -0
- package/lib/components/{input → deprecated-input}/input.test.d.ts +0 -0
- package/lib/components/{select → deprecated-select}/index.d.ts +0 -0
- package/lib/components/{select → deprecated-select}/index.js +0 -0
- package/lib/components/{input → deprecated-select}/index.js.map +0 -0
- package/lib/components/{select → deprecated-select}/select.d.ts +0 -0
- package/lib/components/{select → deprecated-select}/select.js +0 -0
- package/lib/components/deprecated-select/select.js.map +1 -0
- package/lib/components/{select → deprecated-select}/select.test.d.ts +0 -0
- package/lib/index.d.ts +3 -7
- package/lib/index.js +1 -1
- package/lib/new-components/base-button/base-button.d.ts +7 -4
- package/lib/new-components/base-button/base-button.js +1 -1
- package/lib/new-components/base-button/base-button.js.map +1 -1
- package/lib/new-components/base-button/base-button.module.css.js +1 -1
- package/lib/new-components/base-field/base-field.d.ts +66 -9
- package/lib/new-components/base-field/base-field.js +1 -1
- package/lib/new-components/base-field/base-field.js.map +1 -1
- package/lib/new-components/base-field/base-field.module.css.js +1 -1
- package/lib/new-components/password-field/password-field.d.ts +3 -2
- package/lib/new-components/password-field/password-field.js +1 -1
- package/lib/new-components/password-field/password-field.js.map +1 -1
- package/lib/new-components/password-field/password-field.module.css.js +1 -1
- package/lib/new-components/select-field/select-field.d.ts +1 -1
- package/lib/new-components/select-field/select-field.js +1 -1
- package/lib/new-components/select-field/select-field.js.map +1 -1
- package/lib/new-components/select-field/select-field.module.css.js +1 -1
- package/lib/new-components/switch-field/switch-field.d.ts +1 -1
- package/lib/new-components/text/text.module.css.js +1 -1
- package/lib/new-components/text-area/text-area.d.ts +3 -3
- package/lib/new-components/text-area/text-area.js +1 -1
- package/lib/new-components/text-area/text-area.js.map +1 -1
- package/lib/new-components/text-area/text-area.module.css.js +1 -1
- package/lib/new-components/text-field/text-field.d.ts +3 -2
- package/lib/new-components/text-field/text-field.js +1 -1
- package/lib/new-components/text-field/text-field.js.map +1 -1
- package/lib/new-components/text-field/text-field.module.css.js +1 -1
- package/package.json +1 -1
- package/styles/alert.css +1 -1
- package/styles/base-button.css +1 -1
- package/styles/base-button.module.css.css +1 -1
- package/styles/base-field.css +4 -3
- package/styles/base-field.module.css.css +1 -1
- package/styles/checkbox-field.css +1 -1
- package/styles/modal.css +1 -1
- package/styles/password-field.css +5 -4
- package/styles/password-field.module.css.css +1 -1
- package/styles/reactist.css +11 -15
- package/styles/select-field.css +4 -3
- package/styles/select-field.module.css.css +1 -1
- package/styles/switch-field.css +3 -2
- package/styles/text-area.css +4 -3
- package/styles/text-area.module.css.css +1 -1
- package/styles/text-field.css +4 -3
- package/styles/text-field.module.css.css +1 -1
- package/styles/text.css +1 -1
- package/styles/text.module.css.css +1 -1
- package/es/components/checkbox/checkbox.js +0 -24
- package/es/components/checkbox/checkbox.js.map +0 -1
- package/es/components/checkbox/index.js +0 -6
- package/es/components/deprecated-loading/deprecated-loading.js +0 -39
- package/es/components/deprecated-loading/deprecated-loading.js.map +0 -1
- package/es/components/deprecated-modal/deprecated-modal.js +0 -207
- package/es/components/deprecated-modal/deprecated-modal.js.map +0 -1
- package/es/components/deprecated-modal/index.js +0 -11
- package/es/components/deprecated-modal/index.js.map +0 -1
- package/es/components/dropdown/dropdown.js.map +0 -1
- package/es/components/input/input.js.map +0 -1
- package/es/components/popover/index.js +0 -6
- package/es/components/popover/index.js.map +0 -1
- package/es/components/popover/popover.js +0 -206
- package/es/components/popover/popover.js.map +0 -1
- package/es/components/popover/positioning-utils.js +0 -104
- package/es/components/popover/positioning-utils.js.map +0 -1
- package/es/components/select/index.js.map +0 -1
- package/es/components/select/select.js.map +0 -1
- package/lib/components/checkbox/checkbox.d.ts +0 -13
- package/lib/components/checkbox/checkbox.js +0 -2
- package/lib/components/checkbox/checkbox.js.map +0 -1
- package/lib/components/checkbox/checkbox.test.d.ts +0 -1
- package/lib/components/checkbox/index.d.ts +0 -2
- package/lib/components/checkbox/index.js +0 -2
- package/lib/components/deprecated-loading/deprecated-loading.d.ts +0 -19
- package/lib/components/deprecated-loading/deprecated-loading.js +0 -2
- package/lib/components/deprecated-loading/deprecated-loading.js.map +0 -1
- package/lib/components/deprecated-loading/deprecated-loading.test.d.ts +0 -1
- package/lib/components/deprecated-loading/index.d.ts +0 -1
- package/lib/components/deprecated-modal/deprecated-modal.d.ts +0 -88
- package/lib/components/deprecated-modal/deprecated-modal.js +0 -2
- package/lib/components/deprecated-modal/deprecated-modal.js.map +0 -1
- package/lib/components/deprecated-modal/deprecated-modal.test.d.ts +0 -1
- package/lib/components/deprecated-modal/index.d.ts +0 -10
- package/lib/components/deprecated-modal/index.js +0 -2
- package/lib/components/deprecated-modal/index.js.map +0 -1
- package/lib/components/dropdown/dropdown.js.map +0 -1
- package/lib/components/input/input.js.map +0 -1
- package/lib/components/popover/index.d.ts +0 -2
- package/lib/components/popover/index.js +0 -2
- package/lib/components/popover/index.js.map +0 -1
- package/lib/components/popover/popover.d.ts +0 -54
- package/lib/components/popover/popover.js +0 -2
- package/lib/components/popover/popover.js.map +0 -1
- package/lib/components/popover/popover.test.d.ts +0 -1
- package/lib/components/popover/positioning-utils.d.ts +0 -19
- package/lib/components/popover/positioning-utils.js +0 -2
- package/lib/components/popover/positioning-utils.js.map +0 -1
- package/lib/components/popover/positioning-utils.test.d.ts +0 -1
- package/lib/components/select/index.js.map +0 -1
- package/lib/components/select/select.js.map +0 -1
- package/styles/checkbox.css +0 -1
- package/styles/deprecated-loading.css +0 -1
- package/styles/deprecated-modal.css +0 -1
- package/styles/popover.css +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","sources":["../../../src/components/dropdown/dropdown.tsx"],"sourcesContent":["import React from 'react'\nimport ReactDOM from 'react-dom'\nimport classNames from 'classnames'\n\nimport Button from '../deprecated-button'\n\nimport './dropdown.less'\n\ntype BoxProps = {\n onShowBody?: () => void\n onHideBody?: () => void\n allowBodyInteractions?: boolean\n top?: boolean\n right?: boolean\n scrolling_parent?: string\n children?: [\n React.ReactElement<TriggerProps>,\n React.ReactElement<BodyProps> | ((props: BodyProps) => JSX.Element),\n ]\n className?: string\n}\n\ntype BoxState = {\n top: boolean\n showBody: boolean\n}\n\nclass Box extends React.Component<React.PropsWithChildren<BoxProps>, BoxState> {\n public static displayName: string\n\n constructor(props: BoxProps, context: React.Context<unknown>) {\n super(props, context)\n this.state = {\n showBody: false,\n top: props.top || false,\n }\n\n this._timeout = undefined\n }\n\n componentWillUnmount() {\n document.removeEventListener('click', this._handleClickOutside, true)\n if (this._timeout) {\n clearTimeout(this._timeout)\n }\n }\n _timeout?: ReturnType<typeof setTimeout>\n\n _handleClickOutside = (event: MouseEvent) => {\n const dropdownDOMNode = ReactDOM.findDOMNode(this)\n\n if (dropdownDOMNode && !dropdownDOMNode.contains(event.target as Node))\n this._toggleShowBody()\n else if (!this.props.allowBodyInteractions) {\n // won't close when body interactions are allowed\n this._timeout = setTimeout(() => {\n if (this.state.showBody) {\n this._toggleShowBody()\n }\n }, 100)\n }\n }\n\n _toggleShowBody = () => {\n if (!this.state.showBody) {\n // will show\n if (this.props.onShowBody) this.props.onShowBody()\n document.addEventListener('click', this._handleClickOutside, true)\n } else {\n // will hide\n if (this.props.onHideBody) this.props.onHideBody()\n document.removeEventListener('click', this._handleClickOutside, true)\n }\n\n this.setState({\n showBody: !this.state.showBody,\n })\n }\n\n _getTriggerComponent() {\n const _trigger = this.props.children?.[0]\n return _trigger\n ? React.cloneElement(_trigger, { onClick: this._toggleShowBody })\n : undefined\n }\n\n // https://facebook.github.io/react/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components\n _setPosition = (body: HTMLElement | null) => {\n if (body) {\n const scrollingParent = document.getElementById(\n this.props.scrolling_parent ? this.props.scrolling_parent : '',\n )\n\n if (scrollingParent) {\n const dropdown = ReactDOM.findDOMNode(this)\n if (!dropdown) {\n return\n }\n const dropdownVerticalPosition = (ReactDOM.findDOMNode(this) as HTMLElement)\n .offsetTop\n const dropdownTrigger = (dropdown as Element).querySelector('.trigger')\n if (!dropdownTrigger) {\n return\n }\n const dropdownTriggerHeight = dropdownTrigger.clientHeight\n const dropdownBodyHeight = body.clientHeight\n\n const scrollingParentHeight = scrollingParent.clientHeight\n const scrollingParentOffset = scrollingParent.scrollTop\n\n const bottomOffset =\n scrollingParentHeight +\n scrollingParentOffset -\n dropdownVerticalPosition -\n dropdownTriggerHeight\n\n const top = bottomOffset < dropdownBodyHeight\n\n if (top !== this.state.top) {\n this.setState({ top })\n }\n }\n }\n }\n\n _getBodyComponent() {\n if (!this.state.showBody) {\n return null\n }\n const { top } = this.state\n const { right = false, children } = this.props\n const props = { top, right, setPosition: this._setPosition }\n\n const className = classNames({\n body_wrapper: true,\n with_arrow: true,\n top: top,\n bottom: !top,\n })\n\n const body = children?.[1]\n\n const contentMarkup =\n typeof body === 'function'\n ? body(props)\n : body\n ? React.cloneElement(body, props)\n : undefined\n return (\n <div className={className} style={{ position: 'relative' }}>\n {contentMarkup}\n </div>\n )\n }\n\n render() {\n const className = classNames('reactist_dropdown', this.props.className)\n const { top } = this.state\n\n return (\n <div style={{ display: 'inline-block' }} className={className}>\n {top && this._getBodyComponent()}\n {this._getTriggerComponent()}\n {!top && this._getBodyComponent()}\n </div>\n )\n }\n}\n\nBox.displayName = 'Dropdown.Box'\n\ntype NativeButtonProps = React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n>\n\ntype TriggerProps = Omit<NativeButtonProps, 'title'> & {\n tooltip?: React.ReactNode\n}\n\nconst Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(function Trigger(\n { children, onClick, tooltip, className, ...props },\n ref,\n) {\n function handleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {\n event.preventDefault()\n event.stopPropagation()\n if (onClick) onClick(event)\n }\n\n return (\n <Button\n {...props}\n className={classNames('trigger', className)}\n onClick={handleClick}\n tooltip={tooltip}\n ref={ref}\n >\n {children}\n </Button>\n )\n})\n\nTrigger.displayName = 'Dropdown.Trigger'\n\ntype BodyProps = {\n setPosition?: React.Ref<HTMLDivElement>\n children?: React.ReactNode\n top?: boolean\n right?: boolean\n}\n\nfunction Body({ top, right, children, setPosition }: BodyProps) {\n const style: React.CSSProperties = { position: 'absolute', right: 0, top: 0 }\n\n if (top) {\n style.top = 'auto'\n style.bottom = 0\n }\n\n if (right) {\n style.right = 'auto'\n style.left = 0\n }\n\n return (\n <div ref={setPosition} style={style} className=\"body\" id=\"reactist-dropdown-body\">\n {children}\n </div>\n )\n}\n\nBody.displayName = 'Dropdown.Body'\n\nconst Dropdown = {\n Box,\n Trigger,\n Body,\n}\n\nexport { Dropdown }\n"],"names":["Box","React","Component","constructor","props","context","super","_timeout","_handleClickOutside","event","dropdownDOMNode","ReactDOM","findDOMNode","this","contains","target","_toggleShowBody","allowBodyInteractions","setTimeout","state","showBody","onHideBody","document","removeEventListener","onShowBody","addEventListener","setState","_setPosition","body","scrollingParent","getElementById","scrolling_parent","dropdown","dropdownVerticalPosition","offsetTop","dropdownTrigger","querySelector","top","clientHeight","scrollTop","undefined","componentWillUnmount","clearTimeout","_getTriggerComponent","_trigger","children","_this$props$children","cloneElement","onClick","_getBodyComponent","right","setPosition","className","classNames","body_wrapper","with_arrow","bottom","contentMarkup","style","position","render","display","displayName","Trigger","forwardRef","ref","tooltip","Button","preventDefault","stopPropagation","Body","left","id"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","sources":["../../../src/components/input/input.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport './input.less'\n\ntype InputProps = {\n /** Additional css class applied to the input. */\n className?: string\n ref?: React.Ref<HTMLInputElement>\n}\n\ntype Props = InputProps & React.InputHTMLAttributes<HTMLInputElement>\n\nconst Input: React.FC<React.PropsWithRef<Props>> = React.forwardRef(\n (props: Props, ref: React.Ref<HTMLInputElement>) => {\n const className = classNames('reactist_input', props.className)\n return <input {...props} className={className} ref={ref} />\n },\n)\nInput.displayName = 'Input'\n\nexport { Input }\n"],"names":["Input","React","forwardRef","props","ref","className","classNames","displayName"],"mappings":"8PAaMA,EAA6CC,EAAMC,WACrD,CAACC,EAAcC,KACX,MAAMC,EAAYC,EAAW,iBAAkBH,EAAME,WACrD,OAAOJ,2DAAWE,OAAOE,UAAWA,EAAWD,IAAKA,OAG5DJ,EAAMO,YAAc"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import './popover.less';
|
|
3
|
-
/**
|
|
4
|
-
* Position of the popover. Defaults to `auto`.
|
|
5
|
-
* `auto` tries to position the tooltip to the top,
|
|
6
|
-
* if there's not enough space it tries to position the tooltip clockwise (right, bottom, left).
|
|
7
|
-
* Setting a distinct value like `right` will always position the popover right, regardless of available space.
|
|
8
|
-
* Specifying `horizontal` will only try to position the tooltip left and right in that order.
|
|
9
|
-
* Specifying `vertical` will only try to position the tooltip top and bottom in that order.
|
|
10
|
-
*/
|
|
11
|
-
declare type Position = 'left' | 'right' | 'top' | 'bottom' | 'vertical' | 'horizontal' | 'auto';
|
|
12
|
-
declare type Props = {
|
|
13
|
-
visible?: boolean;
|
|
14
|
-
/** ref of the popover in case you need to manipulate it. */
|
|
15
|
-
popoverRef?: React.Ref<HTMLElement>;
|
|
16
|
-
/** ref of the wrapper in case you need to manipulate it. */
|
|
17
|
-
wrapperRef?: React.Ref<HTMLElement>;
|
|
18
|
-
/** Function to be called when the mouse enters the trigger. */
|
|
19
|
-
onMouseEnter?: React.MouseEventHandler;
|
|
20
|
-
/** Function to be called when the mouse leaves the trigger. */
|
|
21
|
-
onMouseLeave?: React.MouseEventHandler;
|
|
22
|
-
onClick?: React.MouseEventHandler;
|
|
23
|
-
/** Additional css class that is applied to the wrapper element. */
|
|
24
|
-
wrapperClassName?: string;
|
|
25
|
-
/** Additional css class that is applied to the popover element. */
|
|
26
|
-
popoverClassName?: string;
|
|
27
|
-
/** Additional css class that is applied to style the arrow. Not applied when `withArrow` is false. */
|
|
28
|
-
arrowClassName?: string;
|
|
29
|
-
/** Content prop of the popover. */
|
|
30
|
-
content?: (() => React.ReactNode) | React.ReactNode;
|
|
31
|
-
trigger?: React.ReactNode;
|
|
32
|
-
position: Position;
|
|
33
|
-
withArrow?: boolean;
|
|
34
|
-
/**
|
|
35
|
-
* Whether vague positioning is allowed. When set to true the popover prefers to be fully visible over being correctly centered.
|
|
36
|
-
*/
|
|
37
|
-
allowVaguePositioning?: boolean;
|
|
38
|
-
/** Gap between the popover wrapper and the arrow. */
|
|
39
|
-
gapSize: number;
|
|
40
|
-
};
|
|
41
|
-
declare class Popover extends React.Component<Props> {
|
|
42
|
-
static displayName: string;
|
|
43
|
-
static defaultProps: Props;
|
|
44
|
-
componentDidMount(): void;
|
|
45
|
-
componentDidUpdate(prevProps: Props): void;
|
|
46
|
-
popover: HTMLElement;
|
|
47
|
-
wrapper: HTMLElement;
|
|
48
|
-
_updatePopoverPosition: () => void;
|
|
49
|
-
_getClassNameForPosition: (position: Position | undefined) => string;
|
|
50
|
-
_updatePopoverRef: (popover: HTMLElement) => void;
|
|
51
|
-
_updateWrapperRef: (wrapper: HTMLElement) => void;
|
|
52
|
-
render(): JSX.Element;
|
|
53
|
-
}
|
|
54
|
-
export { Popover };
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=t(require("react")),o=t(require("classnames")),i=require("./positioning-utils.js");class p extends e.Component{constructor(...t){super(...t),this.popover=void 0,this.wrapper=void 0,this._updatePopoverPosition=()=>{const{position:t,allowVaguePositioning:e,gapSize:o}=this.props,p=this.wrapper.getBoundingClientRect(),s=this.popover.getBoundingClientRect(),r=document.documentElement;let n=this.wrapper,a=!1;for(;!a;)"absolute"!==getComputedStyle(n).getPropertyValue("position")&&n!==r&&n.parentElement?n=n.parentElement:a=!0;const l=n.getBoundingClientRect(),h={height:l.height,width:l.width},u={height:s.height,width:s.width},c={height:p.height,width:p.width},g={x:p.left-l.left,y:p.top-l.top},f={x:p.left,y:p.top},d="auto"===t?["top","right","bottom","left","top"]:"vertical"===t?["top","bottom"]:"horizontal"===t?["left","right"]:[t];for(let p=0;p<d.length;p++){const s=d[p];if(null!=s&&i.hasEnoughSpace(h,u,c,g,s,o)||p===d.length-1){const p=null!=s?i.calculatePosition(s,c,f,u,o):f;this.popover.style.top=p.y+"px",this.popover.style.left=p.x+"px",e&&(p.x<0&&(this.popover.style.left=2*o+"px"),p.y+u.height>h.height&&(this.popover.style.top=h.height-u.height-2*o+"px")),s!==t&&(this.popover.className=this._getClassNameForPosition(s));break}}},this._getClassNameForPosition=t=>{const{visible:e,withArrow:i,arrowClassName:p}=this.props,s=o("reactist_popover",{visible:e});return e&&i?o(s,p,{arrow_top:"bottom"===t,arrow_right:"left"===t,arrow_bottom:"auto"===t||"top"===t,arrow_left:"right"===t}):s},this._updatePopoverRef=t=>{this.popover=t,"function"==typeof this.props.popoverRef&&this.props.popoverRef(t)},this._updateWrapperRef=t=>{this.wrapper=t,"function"==typeof this.props.wrapperRef&&this.props.wrapperRef(t)}}componentDidMount(){this.props.visible&&this._updatePopoverPosition()}componentDidUpdate(t){if(this.wrapper&&this.props.visible){const e=t.allowVaguePositioning!==this.props.allowVaguePositioning,o=t.visible!==this.props.visible,i=t.withArrow!==this.props.withArrow,p=t.gapSize!==this.props.gapSize,s=t.content!==this.props.content;(t.position!==this.props.position||e||o||i||p||s)&&this._updatePopoverPosition()}}render(){const{position:t,wrapperClassName:i,popoverClassName:p,onMouseEnter:s,onMouseLeave:r,onClick:n,trigger:a,content:l}=this.props,h=t?this._getClassNameForPosition(t):"",u=o("reactist_popover__content",p),c=o("reactist_popover__wrapper",i),g=e.Children.only(a);return e.createElement("span",{className:c,onMouseEnter:s,onMouseLeave:r,ref:this._updateWrapperRef},e.cloneElement(g,{onClick:function(t){n&&n(t),"function"==typeof g.props.onClick&&g.props.onClick(t)}}),e.createElement("span",{className:h,ref:this._updatePopoverRef},this.props.visible?e.createElement("span",{className:u},"function"==typeof l?l():l):null))}}p.displayName=void 0,p.defaultProps=void 0,p.displayName="Popover",p.defaultProps={position:"auto",gapSize:5},exports.Popover=p;
|
|
2
|
-
//# sourceMappingURL=popover.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"popover.js","sources":["../../../src/components/popover/popover.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport { hasEnoughSpace, calculatePosition, RelativePosition } from './positioning-utils'\n\nimport './popover.less'\n\n/**\n * Position of the popover. Defaults to `auto`.\n * `auto` tries to position the tooltip to the top,\n * if there's not enough space it tries to position the tooltip clockwise (right, bottom, left).\n * Setting a distinct value like `right` will always position the popover right, regardless of available space.\n * Specifying `horizontal` will only try to position the tooltip left and right in that order.\n * Specifying `vertical` will only try to position the tooltip top and bottom in that order.\n */\ntype Position = 'left' | 'right' | 'top' | 'bottom' | 'vertical' | 'horizontal' | 'auto'\n\ntype Props = {\n visible?: boolean\n /** ref of the popover in case you need to manipulate it. */\n popoverRef?: React.Ref<HTMLElement>\n /** ref of the wrapper in case you need to manipulate it. */\n wrapperRef?: React.Ref<HTMLElement>\n /** Function to be called when the mouse enters the trigger. */\n onMouseEnter?: React.MouseEventHandler\n /** Function to be called when the mouse leaves the trigger. */\n onMouseLeave?: React.MouseEventHandler\n onClick?: React.MouseEventHandler\n /** Additional css class that is applied to the wrapper element. */\n wrapperClassName?: string\n /** Additional css class that is applied to the popover element. */\n popoverClassName?: string\n /** Additional css class that is applied to style the arrow. Not applied when `withArrow` is false. */\n arrowClassName?: string\n /** Content prop of the popover. */\n content?: (() => React.ReactNode) | React.ReactNode\n trigger?: React.ReactNode\n position: Position\n withArrow?: boolean\n /**\n * Whether vague positioning is allowed. When set to true the popover prefers to be fully visible over being correctly centered.\n */\n allowVaguePositioning?: boolean\n /** Gap between the popover wrapper and the arrow. */\n gapSize: number\n}\n\nclass Popover extends React.Component<Props> {\n public static displayName: string\n public static defaultProps: Props\n\n componentDidMount() {\n if (this.props.visible) {\n this._updatePopoverPosition()\n }\n }\n\n componentDidUpdate(prevProps: Props) {\n if (this.wrapper && this.props.visible) {\n const positionChanged = prevProps.position !== this.props.position\n const vaguePositioningChanged =\n prevProps.allowVaguePositioning !== this.props.allowVaguePositioning\n const visibilityChanged = prevProps.visible !== this.props.visible\n const arrowChanged = prevProps.withArrow !== this.props.withArrow\n const gapSizeChanged = prevProps.gapSize !== this.props.gapSize\n const contentChanged = prevProps.content !== this.props.content\n if (\n positionChanged ||\n vaguePositioningChanged ||\n visibilityChanged ||\n arrowChanged ||\n gapSizeChanged ||\n contentChanged\n ) {\n this._updatePopoverPosition()\n }\n }\n }\n\n popover!: HTMLElement\n wrapper!: HTMLElement\n\n _updatePopoverPosition = () => {\n const { position, allowVaguePositioning, gapSize } = this.props\n const wrapperRect = this.wrapper.getBoundingClientRect()\n const popoverRect = this.popover.getBoundingClientRect()\n\n // Instead of using the documentElement find the nearest absolutely positioned element\n const documentEl = document.documentElement\n let node = this.wrapper\n let foundParent = false\n while (!foundParent) {\n const styles = getComputedStyle(node)\n const position = styles.getPropertyValue('position')\n if (position === 'absolute' || node === documentEl || !node.parentElement) {\n foundParent = true\n } else {\n node = node.parentElement\n }\n }\n const nodeRect = node.getBoundingClientRect()\n const windowDimensions = {\n height: nodeRect.height,\n width: nodeRect.width,\n }\n\n const popoverDimensions = {\n height: popoverRect.height,\n width: popoverRect.width,\n }\n const wrapperDimensions = {\n height: wrapperRect.height,\n width: wrapperRect.width,\n }\n const wrapperPositionRelative = {\n x: wrapperRect.left - nodeRect.left,\n y: wrapperRect.top - nodeRect.top,\n }\n const wrapperPositionAbsolute = {\n x: wrapperRect.left,\n y: wrapperRect.top,\n }\n\n const positionsToTry: RelativePosition[] =\n position === 'auto'\n ? ['top', 'right', 'bottom', 'left', 'top']\n : position === 'vertical'\n ? ['top', 'bottom']\n : position === 'horizontal'\n ? ['left', 'right']\n : [position]\n\n for (let index = 0; index < positionsToTry.length; index++) {\n const currentPosition = positionsToTry[index]\n const enoughSpaceAtPosition =\n currentPosition != null\n ? hasEnoughSpace(\n windowDimensions,\n popoverDimensions,\n wrapperDimensions,\n wrapperPositionRelative,\n currentPosition,\n gapSize,\n )\n : false\n\n if (enoughSpaceAtPosition || index === positionsToTry.length - 1) {\n const popoverPosition =\n currentPosition != null\n ? calculatePosition(\n currentPosition,\n wrapperDimensions,\n wrapperPositionAbsolute,\n popoverDimensions,\n gapSize,\n )\n : wrapperPositionAbsolute\n this.popover.style.top = `${popoverPosition.y}px`\n this.popover.style.left = `${popoverPosition.x}px`\n\n /**\n * Correct placement if vague positioning is allowed.\n * When it's not allowed we \"cut off\" popovers and display them\n * out of the viewport to maintain their centered position.\n */\n if (allowVaguePositioning) {\n // correct horizontally\n if (popoverPosition.x < 0) {\n this.popover.style.left = `${2 * gapSize}px`\n }\n // correct vertically\n if (popoverPosition.y + popoverDimensions.height > windowDimensions.height) {\n this.popover.style.top = `${\n windowDimensions.height - popoverDimensions.height - 2 * gapSize\n }px`\n }\n }\n\n if (currentPosition !== position) {\n this.popover.className = this._getClassNameForPosition(currentPosition)\n }\n break\n }\n }\n }\n\n _getClassNameForPosition = (position: Position | undefined) => {\n const { visible, withArrow, arrowClassName } = this.props\n const className = classNames('reactist_popover', { visible })\n\n if (visible && withArrow) {\n return classNames(className, arrowClassName, {\n arrow_top: position === 'bottom',\n arrow_right: position === 'left',\n arrow_bottom: position === 'auto' || position === 'top',\n arrow_left: position === 'right',\n })\n }\n return className\n }\n\n _updatePopoverRef = (popover: HTMLElement) => {\n this.popover = popover\n if (typeof this.props.popoverRef === 'function') {\n this.props.popoverRef(popover)\n }\n }\n\n _updateWrapperRef = (wrapper: HTMLElement) => {\n this.wrapper = wrapper\n if (typeof this.props.wrapperRef === 'function') {\n this.props.wrapperRef(wrapper)\n }\n }\n\n render() {\n const {\n position,\n wrapperClassName,\n popoverClassName,\n onMouseEnter,\n onMouseLeave,\n onClick,\n trigger,\n content,\n } = this.props\n const popoverClass = position ? this._getClassNameForPosition(position) : ''\n const popoverContentClass = classNames('reactist_popover__content', popoverClassName)\n const wrapperClass = classNames('reactist_popover__wrapper', wrapperClassName)\n const triggerElement = React.Children.only<React.ReactElement>(\n trigger as React.ReactElement,\n )\n\n function handleTriggerClick(event: React.SyntheticEvent) {\n // @ts-expect-error This is temporary while we revisit the Popover interface\n if (onClick) onClick(event)\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n if (typeof triggerElement.props.onClick === 'function') {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call\n triggerElement.props.onClick(event)\n }\n }\n\n return (\n <span\n className={wrapperClass}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n ref={this._updateWrapperRef}\n >\n {React.cloneElement(triggerElement, { onClick: handleTriggerClick })}\n <span className={popoverClass} ref={this._updatePopoverRef}>\n {this.props.visible ? (\n <span className={popoverContentClass}>\n {typeof content === 'function' ? content() : content}\n </span>\n ) : null}\n </span>\n </span>\n )\n }\n}\nPopover.displayName = 'Popover'\nPopover.defaultProps = {\n position: 'auto',\n gapSize: 5, // default size of the arrow (see `tooltip.less`)\n}\n\nexport { Popover }\n"],"names":["Popover","React","Component","popover","wrapper","_updatePopoverPosition","position","allowVaguePositioning","gapSize","this","props","wrapperRect","getBoundingClientRect","popoverRect","documentEl","document","documentElement","node","foundParent","getComputedStyle","getPropertyValue","parentElement","nodeRect","windowDimensions","height","width","popoverDimensions","wrapperDimensions","wrapperPositionRelative","x","left","y","top","wrapperPositionAbsolute","positionsToTry","index","length","currentPosition","hasEnoughSpace","popoverPosition","calculatePosition","style","className","_getClassNameForPosition","visible","withArrow","arrowClassName","classNames","arrow_top","arrow_right","arrow_bottom","arrow_left","_updatePopoverRef","popoverRef","_updateWrapperRef","wrapperRef","componentDidMount","componentDidUpdate","prevProps","vaguePositioningChanged","visibilityChanged","arrowChanged","gapSizeChanged","contentChanged","content","render","wrapperClassName","popoverClassName","onMouseEnter","onMouseLeave","onClick","trigger","popoverClass","popoverContentClass","wrapperClass","triggerElement","Children","only","ref","cloneElement","event","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
declare type Dimensions = {
|
|
2
|
-
width: number;
|
|
3
|
-
height: number;
|
|
4
|
-
};
|
|
5
|
-
declare type AbsolutePosition = {
|
|
6
|
-
x: number;
|
|
7
|
-
y: number;
|
|
8
|
-
};
|
|
9
|
-
declare type RelativePosition = 'top' | 'right' | 'bottom' | 'left';
|
|
10
|
-
declare type HasEnoughSpaceFn = (windowDimensions: Dimensions, elementDimensions: Dimensions, wrapperDimensions: Dimensions, wrapperPosition: AbsolutePosition, position: RelativePosition, gap: number) => boolean;
|
|
11
|
-
declare const hasEnoughSpace: HasEnoughSpaceFn;
|
|
12
|
-
declare type CenterPositionFn = (wrapperDimensions: Dimensions, wrapperPosition: AbsolutePosition, elementDimensions: Dimensions, gap?: number) => AbsolutePosition;
|
|
13
|
-
declare const calculateTopCenterPosition: CenterPositionFn;
|
|
14
|
-
declare const calculateBottomCenterPosition: CenterPositionFn;
|
|
15
|
-
declare const calculateRightCenterPosition: CenterPositionFn;
|
|
16
|
-
declare const calculateLeftCenterPosition: CenterPositionFn;
|
|
17
|
-
declare type PositionFn = (position: 'top' | 'right' | 'bottom' | 'left', wrapperDimensions: Dimensions, wrapperPosition: AbsolutePosition, elementDimensions: Dimensions, gap?: number) => AbsolutePosition;
|
|
18
|
-
declare const calculatePosition: PositionFn;
|
|
19
|
-
export { hasEnoughSpace, calculatePosition, calculateTopCenterPosition, calculateBottomCenterPosition, calculateRightCenterPosition, calculateLeftCenterPosition, RelativePosition, };
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";function t(t,e,o){return t.x+(e.width-o.width)/2}function e(t,e,o){return t.y+(e.height-o.height)/2}Object.defineProperty(exports,"__esModule",{value:!0});const o=(e,o,i,h=0)=>({x:t(o,e,i),y:o.y-i.height-h}),i=(e,o,i,h=0)=>({x:t(o,e,i),y:o.y+e.height+h}),h=(t,o,i,h=0)=>({x:o.x+t.width+h,y:e(o,t,i)}),r=(t,o,i,h=0)=>({x:o.x-i.width-h,y:e(o,t,i)});exports.calculateBottomCenterPosition=i,exports.calculateLeftCenterPosition=r,exports.calculatePosition=(t,e,n,s,c=0)=>"top"===t?o(e,n,s,c):"right"===t?h(e,n,s,c):"bottom"===t?i(e,n,s,c):"left"===t?r(e,n,s,c):n,exports.calculateRightCenterPosition=h,exports.calculateTopCenterPosition=o,exports.hasEnoughSpace=(o,i,h,r,n,s=0)=>{const{height:c,width:x}=o,{height:l,width:u}=i,{height:a,width:p}=h,{x:g,y:d}=r,y=t(r,h,i),w=e(r,h,i),f=y>=0&&y+u<=x,P=w>=0&&w+l<=c;return"top"===n?f&&d-l-s>=0:"right"===n?P&&g+p+u+s<=x:"left"===n?P&&g-u-s>=0:"bottom"===n&&f&&d+a+l+s<=c};
|
|
2
|
-
//# sourceMappingURL=positioning-utils.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"positioning-utils.js","sources":["../../../src/components/popover/positioning-utils.ts"],"sourcesContent":["type Dimensions = { width: number; height: number }\ntype AbsolutePosition = { x: number; y: number }\ntype RelativePosition = 'top' | 'right' | 'bottom' | 'left'\n\ntype HasEnoughSpaceFn = (\n windowDimensions: Dimensions,\n elementDimensions: Dimensions,\n wrapperDimensions: Dimensions,\n wrapperPosition: AbsolutePosition,\n position: RelativePosition,\n gap: number,\n) => boolean\n\nconst hasEnoughSpace: HasEnoughSpaceFn = (\n windowDimensions,\n elementDimensions,\n wrapperDimensions,\n wrapperPosition,\n position,\n gap = 0,\n) => {\n const { height: windowHeight, width: windowWidth } = windowDimensions\n const { height: elementHeight, width: elementWidth } = elementDimensions\n const { height: wrapperHeight, width: wrapperWidth } = wrapperDimensions\n const { x: wrapperX, y: wrapperY } = wrapperPosition\n\n const verticalPosition = _calculateVerticalPosition(\n wrapperPosition,\n wrapperDimensions,\n elementDimensions,\n )\n const horizontalPosition = _calculateHorizontalPosition(\n wrapperPosition,\n wrapperDimensions,\n elementDimensions,\n )\n const canPlaceVertically =\n verticalPosition >= 0 && verticalPosition + elementWidth <= windowWidth\n const canPlaceHorizontally =\n horizontalPosition >= 0 && horizontalPosition + elementHeight <= windowHeight\n\n if (position === 'top') {\n return canPlaceVertically && wrapperY - elementHeight - gap >= 0\n } else if (position === 'right') {\n return canPlaceHorizontally && wrapperX + wrapperWidth + elementWidth + gap <= windowWidth\n } else if (position === 'left') {\n return canPlaceHorizontally && wrapperX - elementWidth - gap >= 0\n } else if (position === 'bottom') {\n return canPlaceVertically && wrapperY + wrapperHeight + elementHeight + gap <= windowHeight\n }\n return false\n}\n\nfunction _calculateVerticalPosition(\n wrapperPosition: AbsolutePosition,\n wrapperDimensions: Dimensions,\n elementDimensions: Dimensions,\n): number {\n return wrapperPosition.x + (wrapperDimensions.width - elementDimensions.width) / 2\n}\n\nfunction _calculateHorizontalPosition(\n wrapperPosition: AbsolutePosition,\n wrapperDimensions: Dimensions,\n elementDimensions: Dimensions,\n): number {\n return wrapperPosition.y + (wrapperDimensions.height - elementDimensions.height) / 2\n}\n\ntype CenterPositionFn = (\n wrapperDimensions: Dimensions,\n wrapperPosition: AbsolutePosition,\n elementDimensions: Dimensions,\n gap?: number,\n) => AbsolutePosition\n\nconst calculateTopCenterPosition: CenterPositionFn = (\n wrapperDimensions,\n wrapperPosition,\n elementDimensions,\n gap = 0,\n) => {\n const x = _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions)\n const y = wrapperPosition.y - elementDimensions.height - gap\n return { x, y }\n}\n\nconst calculateBottomCenterPosition: CenterPositionFn = (\n wrapperDimensions,\n wrapperPosition,\n elementDimensions,\n gap = 0,\n) => {\n const x = _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions)\n const y = wrapperPosition.y + wrapperDimensions.height + gap\n return { x, y }\n}\n\nconst calculateRightCenterPosition: CenterPositionFn = (\n wrapperDimensions,\n wrapperPosition,\n elementDimensions,\n gap = 0,\n) => {\n const x = wrapperPosition.x + wrapperDimensions.width + gap\n const y = _calculateHorizontalPosition(wrapperPosition, wrapperDimensions, elementDimensions)\n return { x, y }\n}\n\nconst calculateLeftCenterPosition: CenterPositionFn = (\n wrapperDimensions,\n wrapperPosition,\n elementDimensions,\n gap = 0,\n) => {\n const x = wrapperPosition.x - elementDimensions.width - gap\n const y = _calculateHorizontalPosition(wrapperPosition, wrapperDimensions, elementDimensions)\n return { x, y }\n}\n\ntype PositionFn = (\n position: 'top' | 'right' | 'bottom' | 'left',\n wrapperDimensions: Dimensions,\n wrapperPosition: AbsolutePosition,\n elementDimensions: Dimensions,\n gap?: number,\n) => AbsolutePosition\n\nconst calculatePosition: PositionFn = (\n position,\n wrapperDimensions,\n wrapperPosition,\n elementDimensions,\n gap = 0,\n) => {\n if (position === 'top') {\n return calculateTopCenterPosition(\n wrapperDimensions,\n wrapperPosition,\n elementDimensions,\n gap,\n )\n } else if (position === 'right') {\n return calculateRightCenterPosition(\n wrapperDimensions,\n wrapperPosition,\n elementDimensions,\n gap,\n )\n } else if (position === 'bottom') {\n return calculateBottomCenterPosition(\n wrapperDimensions,\n wrapperPosition,\n elementDimensions,\n gap,\n )\n } else if (position === 'left') {\n return calculateLeftCenterPosition(\n wrapperDimensions,\n wrapperPosition,\n elementDimensions,\n gap,\n )\n }\n return wrapperPosition\n}\n\nexport {\n hasEnoughSpace,\n calculatePosition,\n calculateTopCenterPosition,\n calculateBottomCenterPosition,\n calculateRightCenterPosition,\n calculateLeftCenterPosition,\n RelativePosition,\n}\n"],"names":["_calculateVerticalPosition","wrapperPosition","wrapperDimensions","elementDimensions","x","width","_calculateHorizontalPosition","y","height","calculateTopCenterPosition","gap","calculateBottomCenterPosition","calculateRightCenterPosition","calculateLeftCenterPosition","position","windowDimensions","windowHeight","windowWidth","elementHeight","elementWidth","wrapperHeight","wrapperWidth","wrapperX","wrapperY","verticalPosition","horizontalPosition","canPlaceVertically","canPlaceHorizontally"],"mappings":"aAqDA,SAASA,EACLC,EACAC,EACAC,GAEA,OAAOF,EAAgBG,GAAKF,EAAkBG,MAAQF,EAAkBE,OAAS,EAGrF,SAASC,EACLL,EACAC,EACAC,GAEA,OAAOF,EAAgBM,GAAKL,EAAkBM,OAASL,EAAkBK,QAAU,+DAUjFC,EAA+C,CACjDP,EACAD,EACAE,EACAO,EAAM,KAIC,CAAEN,EAFCJ,EAA2BC,EAAiBC,EAAmBC,GAE7DI,EADFN,EAAgBM,EAAIJ,EAAkBK,OAASE,IAIvDC,EAAkD,CACpDT,EACAD,EACAE,EACAO,EAAM,KAIC,CAAEN,EAFCJ,EAA2BC,EAAiBC,EAAmBC,GAE7DI,EADFN,EAAgBM,EAAIL,EAAkBM,OAASE,IAIvDE,EAAiD,CACnDV,EACAD,EACAE,EACAO,EAAM,KAIC,CAAEN,EAFCH,EAAgBG,EAAIF,EAAkBG,MAAQK,EAE5CH,EADFD,EAA6BL,EAAiBC,EAAmBC,KAIzEU,EAAgD,CAClDX,EACAD,EACAE,EACAO,EAAM,KAIC,CAAEN,EAFCH,EAAgBG,EAAID,EAAkBE,MAAQK,EAE5CH,EADFD,EAA6BL,EAAiBC,EAAmBC,6GAYzC,CAClCW,EACAZ,EACAD,EACAE,EACAO,EAAM,IAEW,QAAbI,EACOL,EACHP,EACAD,EACAE,EACAO,GAEgB,UAAbI,EACAF,EACHV,EACAD,EACAE,EACAO,GAEgB,WAAbI,EACAH,EACHT,EACAD,EACAE,EACAO,GAEgB,SAAbI,EACAD,EACHX,EACAD,EACAE,EACAO,GAGDT,qGAvJ8B,CACrCc,EACAZ,EACAD,EACAD,EACAa,EACAJ,EAAM,KAEN,MAAQF,OAAQQ,EAAcX,MAAOY,GAAgBF,GAC7CP,OAAQU,EAAeb,MAAOc,GAAiBhB,GAC/CK,OAAQY,EAAef,MAAOgB,GAAiBnB,GAC/CE,EAAGkB,EAAUf,EAAGgB,GAAatB,EAE/BuB,EAAmBxB,EACrBC,EACAC,EACAC,GAEEsB,EAAqBnB,EACvBL,EACAC,EACAC,GAEEuB,EACFF,GAAoB,GAAKA,EAAmBL,GAAgBF,EAC1DU,EACFF,GAAsB,GAAKA,EAAqBP,GAAiBF,EAErE,MAAiB,QAAbF,EACOY,GAAsBH,EAAWL,EAAgBR,GAAO,EAC3C,UAAbI,EACAa,GAAwBL,EAAWD,EAAeF,EAAeT,GAAOO,EAC3D,SAAbH,EACAa,GAAwBL,EAAWH,EAAeT,GAAO,EAC5C,WAAbI,GACAY,GAAsBH,EAAWH,EAAgBF,EAAgBR,GAAOM"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","sources":["../../../src/components/select/select.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport './select.less'\n\ntype Option = {\n /** Optional key for each option. If not provided `value` is used. */\n key?: string | number\n /** Value of the option. */\n value: string | number\n /** Text to display for the option. */\n text?: string | number\n /** Whether the options is disabled or not. */\n disabled?: boolean\n}\n\ntype Props = {\n className?: string\n disabled?: boolean\n /** Currently selected value. */\n value?: string | number\n /** Callback for the change event. Will be called with the next value (not the full event). */\n onChange?: (value: string) => void\n /** Options that are rendered in the select. */\n options?: Option[]\n /** Value to initially be set */\n defaultValue?: string | number\n}\n\nfunction Select({\n value,\n options = [],\n onChange,\n disabled = true,\n className = '',\n defaultValue,\n ...otherProps\n}: Props) {\n const selectClassName = classNames('reactist_select', { disabled }, className)\n return (\n <select\n className={selectClassName}\n value={value}\n onChange={(event) => (onChange ? onChange(event.target.value) : undefined)}\n disabled={disabled}\n defaultValue={defaultValue}\n {...otherProps}\n >\n {options?.map((option) => (\n <option\n key={option.key || option.value}\n value={option.value}\n disabled={option.disabled}\n >\n {option.text}\n </option>\n ))}\n </select>\n )\n}\nSelect.displayName = 'Select'\nSelect.defaultProps = {\n options: [],\n disabled: false,\n}\n\nexport { Select }\n"],"names":["Select","value","options","onChange","disabled","className","defaultValue","otherProps","selectClassName","classNames","React","event","target","undefined","map","option","key","text","displayName","defaultProps"],"mappings":"qUA6BA,SAASA,SAAOC,MACZA,EADYC,QAEZA,EAAU,GAFEC,SAGZA,EAHYC,SAIZA,GAAW,EAJCC,UAKZA,EAAY,GALAC,aAMZA,KACGC,iCAEH,MAAMC,EAAkBC,EAAW,kBAAmB,CAAEL,SAAAA,GAAYC,GACpE,OACIK,0CACIL,UAAWG,EACXP,MAAOA,EACPE,SAAWQ,GAAWR,EAAWA,EAASQ,EAAMC,OAAOX,YAASY,EAChET,SAAUA,EACVE,aAAcA,GACVC,SAEHL,SAAAA,EAASY,IAAKC,GACXL,0BACIM,IAAKD,EAAOC,KAAOD,EAAOd,MAC1BA,MAAOc,EAAOd,MACdG,SAAUW,EAAOX,UAEhBW,EAAOE,QAM5BjB,EAAOkB,YAAc,SACrBlB,EAAOmB,aAAe,CAClBjB,QAAS,GACTE,UAAU"}
|
package/styles/checkbox.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.reactist_checkbox{font-size:.875rem;color:#202020;font-weight:400;line-height:1.7}.reactist_checkbox:hover{cursor:pointer}.reactist_checkbox .reactist_checkbox--input{margin-right:10px}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@-webkit-keyframes fadein{0%{opacity:0}to{opacity:1}}@keyframes fadein{0%{opacity:0}to{opacity:1}}@-webkit-keyframes spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.reactist_loading{display:flex;align-items:center;justify-items:center;align-content:center;justify-content:center;flex:1 1 auto}.reactist_loading .reactist_loading--spinner svg{-webkit-animation-name:spinner;animation-name:spinner;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@-webkit-keyframes fadein{0%{opacity:0}to{opacity:1}}@keyframes fadein{0%{opacity:0}to{opacity:1}}@-webkit-keyframes spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.reactist_overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;background:rgba(0,0,0,.7);overflow:auto;-webkit-animation:fadein .25s;animation:fadein .25s}.reactist_overlay_inner{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:40px 0;width:100%}.reactist_modal_box{display:flex;flex-direction:column;overflow:auto;overflow-x:hidden;width:580px;border-radius:3px;box-shadow:0 2px 8px 0 rgba(0,0,0,.16)}.reactist_modal_box.medium{width:680px}.reactist_modal_box.large{width:60%;max-width:1000px}@media only screen and (max-width:992px){.reactist_modal_box,.reactist_modal_box.large{width:calc(100% - 80px)}.reactist_modal_box{max-width:580px}}.reactist_modal_box__header{display:flex;flex-shrink:0;align-items:center;background-color:#f9f9f9;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #fafafa}.reactist_modal_box__header p{margin:0 0 0 25px;padding:10px 0;font-size:.875rem;color:#202020;font-weight:700;line-height:1.7}.reactist_modal_box__header .title{font-size:1rem;color:#202020;font-weight:700;line-height:1.8;display:block;margin-top:5px}.reactist_modal_box__header .subtitle{font-size:.81rem;color:grey;font-weight:400;line-height:1.6;display:block;margin-top:5px}.reactist_modal_box__header a{display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin-left:auto;margin-right:8px}.reactist_modal_box__body{flex-grow:1;overflow:auto;padding:20px 25px 25px;background-color:#fff;font-size:.875rem;color:#202020;font-weight:400;line-height:1.7}.reactist_modal_box__body.plain{padding:0}.reactist_modal_box__body .dialog{overflow:auto}.reactist_modal_box__body .dialog .reactist_icon{width:42px;float:left;margin-right:20px}.reactist_modal_box__body .dialog .reactist_icon>*{max-height:42px;max-width:100%}.reactist_modal_box__body .dialog .content{float:right;width:calc(100% - 62px)}.reactist_modal_box__body .dialog .content h1{margin:0;font-size:.875rem;color:#202020;font-weight:700;line-height:1.7;line-height:1}.reactist_modal_box__body:after{clear:both;content:"";display:block}.reactist_modal_box__body .close{float:right}.reactist_modal_box__actions{display:flex;flex-shrink:0;justify-content:flex-end;padding:20px 25px;background-color:#fff;border-top:1px solid #ececec}.reactist_modal_box__actions button{margin-left:10px}
|
package/styles/popover.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.reactist_popover{white-space:normal;z-index:1000;position:fixed;top:0;left:0;display:none;visibility:hidden;opacity:0;transition:opacity .1s linear}.reactist_popover__wrapper{display:inline-block;max-width:100%;cursor:unset}.reactist_popover .reactist_popover__content{max-width:100%;display:inline-flex;border-radius:3px;color:#202020;background-color:#fff;border:1px solid #dcdcdc;box-shadow:0 1px 8px 0 rgba(0,0,0,.08)}.reactist_popover.visible{display:inline-block;display:initial;visibility:visible;opacity:1}.reactist_popover.arrow_top:before{top:-5px;border-bottom:5px solid #dcdcdc}.reactist_popover.arrow_top:after,.reactist_popover.arrow_top:before{position:absolute;content:"";height:0;width:0;left:calc(50% - 5px);border-left:5px solid transparent;border-right:5px solid transparent}.reactist_popover.arrow_top:after{top:-4px;border-bottom:5px solid #fff}.reactist_popover.arrow_right:before{right:-5px;border-left:5px solid #dcdcdc}.reactist_popover.arrow_right:after,.reactist_popover.arrow_right:before{position:absolute;content:"";height:0;width:0;bottom:calc(50% - 5px);border-bottom:5px solid transparent;border-top:5px solid transparent}.reactist_popover.arrow_right:after{right:-4px;border-left:5px solid #fff}.reactist_popover.arrow_bottom:before{bottom:-5px;border-top:5px solid #dcdcdc}.reactist_popover.arrow_bottom:after,.reactist_popover.arrow_bottom:before{position:absolute;content:"";height:0;width:0;left:calc(50% - 5px);border-left:5px solid transparent;border-right:5px solid transparent}.reactist_popover.arrow_bottom:after{bottom:-4px;border-top:5px solid #fff}.reactist_popover.arrow_left:before{left:-5px;border-right:5px solid #dcdcdc}.reactist_popover.arrow_left:after,.reactist_popover.arrow_left:before{position:absolute;content:"";height:0;width:0;bottom:calc(50% - 5px);border-bottom:5px solid transparent;border-top:5px solid transparent}.reactist_popover.arrow_left:after{left:-4px;border-right:5px solid #fff}
|