@itwin/core-react 3.1.0-dev.22 → 3.1.0-dev.23
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/lib/cjs/core-react/button/Button.d.ts.map +1 -1
- package/lib/cjs/core-react/button/Button.js +2 -4
- package/lib/cjs/core-react/button/Button.js.map +1 -1
- package/lib/cjs/core-react/inputs/Input.js +1 -1
- package/lib/cjs/core-react/inputs/Input.js.map +1 -1
- package/lib/cjs/core-react/slider/Slider.js.map +1 -1
- package/lib/esm/core-react/button/Button.d.ts.map +1 -1
- package/lib/esm/core-react/button/Button.js +2 -4
- package/lib/esm/core-react/button/Button.js.map +1 -1
- package/lib/esm/core-react/inputs/Input.js +1 -1
- package/lib/esm/core-react/inputs/Input.js.map +1 -1
- package/lib/esm/core-react/slider/Slider.js.map +1 -1
- package/package.json +10 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/core-react/button/Button.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;;GAGG;AACH,oBAAY,UAAU;IACpB,OAAO,KAAK;IACZ,KAAK,UAAU;CAChB;AAED;;;GAGG;AACH,oBAAY,UAAU;IACpB,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,QAAQ,aAAa;IACrB,MAAM,WAAW;CAClB;AAED;;;GAGG;AACH,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW;IAC7F,sCAAsC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8BAA8B;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,kDAAkD;IAClD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,uDAAuD;IACvD,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC,CAAC;CAC9E;AAED;;;GAGG;AACH,qBAAa,MAAO,SAAQ,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC;IAC1D,OAAO,CAAC,gBAAgB,CAetB;IAEc,MAAM;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/core-react/button/Button.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;;GAGG;AACH,oBAAY,UAAU;IACpB,OAAO,KAAK;IACZ,KAAK,UAAU;CAChB;AAED;;;GAGG;AACH,oBAAY,UAAU;IACpB,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,QAAQ,aAAa;IACrB,MAAM,WAAW;CAClB;AAED;;;GAGG;AACH,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW;IAC7F,sCAAsC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8BAA8B;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,kDAAkD;IAClD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,uDAAuD;IACvD,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC,CAAC;CAC9E;AAED;;;GAGG;AACH,qBAAa,MAAO,SAAQ,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC;IAC1D,OAAO,CAAC,gBAAgB,CAetB;IAEc,MAAM;CAQvB;AAED,gBAAgB;AAChB,wBAAgB,sBAAsB,CAAC,UAAU,CAAC,EAAE,UAAU,GAAG,MAAM,CAkBtE"}
|
|
@@ -57,10 +57,8 @@ class Button extends React.PureComponent {
|
|
|
57
57
|
render() {
|
|
58
58
|
const { buttonType, size, className, style, onClick, ...props } = this.props;
|
|
59
59
|
const iuiButtonType = this.getIuiButtonType(buttonType);
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
iuiButtonSize = undefined;
|
|
63
|
-
return React.createElement(itwinui_react_1.Button, { ...props, className: className, style: style, onClick: onClick, styleType: iuiButtonType, size: iuiButtonSize });
|
|
60
|
+
// eslint-disable-next-line deprecation/deprecation
|
|
61
|
+
return React.createElement(itwinui_react_1.Button, { ...props, className: className, style: style, onClick: onClick, styleType: iuiButtonType, size: size === ButtonSize.Large ? undefined : "small" });
|
|
64
62
|
}
|
|
65
63
|
}
|
|
66
64
|
exports.Button = Button;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/core-react/button/Button.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA+B;AAC/B,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/core-react/button/Button.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA+B;AAC/B,wDAAoG;AAGpG;;;GAGG;AACH,IAAY,UAGX;AAHD,WAAY,UAAU;IACpB,0BAAY,CAAA;IACZ,6BAAe,CAAA;AACjB,CAAC,EAHW,UAAU,GAAV,kBAAU,KAAV,kBAAU,QAGrB;AAED;;;GAGG;AACH,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,iCAAmB,CAAA;IACnB,2BAAa,CAAA;IACb,mCAAqB,CAAA;IACrB,+BAAiB,CAAA;AACnB,CAAC,EALW,UAAU,GAAV,kBAAU,KAAV,kBAAU,QAKrB;AAiBD;;;GAGG;AACH,MAAa,MAAO,SAAQ,KAAK,CAAC,aAA0B;IAA5D;;QACU,qBAAgB,GAAG,CAAC,UAAuB,EAAE,EAAE;YACrD,IAAI,aAA+C,CAAC;YACpD,QAAQ,UAAU,EAAE;gBAClB,KAAK,UAAU,CAAC,IAAI,EAAE,8CAA8C;oBAClE,aAAa,GAAG,iBAAiB,CAAC;oBAClC,MAAM;gBACR,KAAK,UAAU,CAAC,MAAM,EAAE,8CAA8C;oBACpE,aAAa,GAAG,SAAS,CAAC;oBAC1B,MAAM;gBACR,KAAK,UAAU,CAAC,OAAO,CAAC,CAAE,8CAA8C;gBACxE;oBACE,aAAa,GAAG,KAAK,CAAC;oBACtB,MAAM;aACT;YACD,OAAO,aAAa,CAAC;QACvB,CAAC,CAAC;IAUJ,CAAC;IARiB,MAAM;QACpB,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAE7E,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;QAExD,mDAAmD;QACnD,OAAO,oBAAC,sBAAc,OAAK,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,KAAK,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,GAAI,CAAC;IAC9K,CAAC;CACF;AA1BD,wBA0BC;AAED,gBAAgB;AAChB,SAAgB,sBAAsB,CAAC,UAAuB;IAC5D,IAAI,aAAqB,CAAC;IAC1B,QAAQ,UAAU,EAAE;QAClB,KAAK,UAAU,CAAC,IAAI,EAAE,8CAA8C;YAClE,aAAa,GAAG,qBAAqB,CAAC;YACtC,MAAM;QACR,KAAK,UAAU,CAAC,QAAQ,EAAE,8CAA8C;YACtE,aAAa,GAAG,yBAAyB,CAAC;YAC1C,MAAM;QACR,KAAK,UAAU,CAAC,MAAM,EAAE,8CAA8C;YACpE,aAAa,GAAG,uBAAuB,CAAC;YACxC,MAAM;QACR,KAAK,UAAU,CAAC,OAAO,CAAC,CAAE,8CAA8C;QACxE;YACE,aAAa,GAAG,wBAAwB,CAAC;YACzC,MAAM;KACT;IACD,OAAO,aAAa,CAAC;AACvB,CAAC;AAlBD,wDAkBC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Button\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { Button as ITwinUI_Button, ButtonProps as ITwinUI_ButtonProps } from \"@itwin/itwinui-react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Sizes for [[Button]] component\r\n * @public\r\n * @deprecated Use `size` prop for itwinui-react Button instead\r\n */\r\nexport enum ButtonSize {\r\n Default = \"\",\r\n Large = \"large\",\r\n}\r\n\r\n/** Types for [[Button]] component\r\n * @public\r\n * @deprecated Use `styleType` prop for itwinui-react Button instead\r\n */\r\nexport enum ButtonType {\r\n Primary = \"primary\",\r\n Blue = \"blue\",\r\n Disabled = \"disabled\",\r\n Hollow = \"hollow\",\r\n}\r\n\r\n/** Properties for [[Button]] component\r\n * @public\r\n * @deprecated Use ButtonProps from itwinui-react instead\r\n */\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n /** Allow ID to be passed to Button */\r\n id?: string;\r\n /** Default and large sizes */\r\n size?: ButtonSize; // eslint-disable-line deprecation/deprecation\r\n /** 4 styles to tweak the content of the button */\r\n buttonType?: ButtonType; // eslint-disable-line deprecation/deprecation\r\n /** A function to be run when the element is clicked */\r\n onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void);\r\n}\r\n\r\n/** Generic button component\r\n * @public\r\n * @deprecated Use Button from itwinui-react instead\r\n */\r\nexport class Button extends React.PureComponent<ButtonProps> { // eslint-disable-line deprecation/deprecation\r\n private getIuiButtonType = (buttonType?: ButtonType) => { // eslint-disable-line deprecation/deprecation\r\n let iuiButtonType: ITwinUI_ButtonProps[\"styleType\"];\r\n switch (buttonType) {\r\n case ButtonType.Blue: // eslint-disable-line deprecation/deprecation\r\n iuiButtonType = \"high-visibility\";\r\n break;\r\n case ButtonType.Hollow: // eslint-disable-line deprecation/deprecation\r\n iuiButtonType = \"default\";\r\n break;\r\n case ButtonType.Primary: // eslint-disable-line deprecation/deprecation\r\n default:\r\n iuiButtonType = \"cta\";\r\n break;\r\n }\r\n return iuiButtonType;\r\n };\r\n\r\n public override render() {\r\n const { buttonType, size, className, style, onClick, ...props } = this.props;\r\n\r\n const iuiButtonType = this.getIuiButtonType(buttonType);\r\n\r\n // eslint-disable-next-line deprecation/deprecation\r\n return <ITwinUI_Button {...props} className={className} style={style} onClick={onClick} styleType={iuiButtonType} size={size === ButtonSize.Large ? undefined : \"small\"} />;\r\n }\r\n}\r\n\r\n/** @internal */\r\nexport function getButtonTypeClassName(buttonType?: ButtonType): string { // eslint-disable-line deprecation/deprecation\r\n let typeClassName: string;\r\n switch (buttonType) {\r\n case ButtonType.Blue: // eslint-disable-line deprecation/deprecation\r\n typeClassName = \"uicore-buttons-blue\";\r\n break;\r\n case ButtonType.Disabled: // eslint-disable-line deprecation/deprecation\r\n typeClassName = \"uicore-buttons-disabled\";\r\n break;\r\n case ButtonType.Hollow: // eslint-disable-line deprecation/deprecation\r\n typeClassName = \"uicore-buttons-hollow\";\r\n break;\r\n case ButtonType.Primary: // eslint-disable-line deprecation/deprecation\r\n default:\r\n typeClassName = \"uicore-buttons-primary\";\r\n break;\r\n }\r\n return typeClassName;\r\n}\r\n"]}
|
|
@@ -15,7 +15,7 @@ const useRefs_1 = require("../utils/hooks/useRefs");
|
|
|
15
15
|
// Defined using following pattern (const Input at bottom) to ensure useful API documentation is extracted
|
|
16
16
|
const ForwardRefInput = React.forwardRef(// eslint-disable-line deprecation/deprecation
|
|
17
17
|
function ForwardRefInput(props, ref) {
|
|
18
|
-
const { className, style, setFocus, nativeKeyHandler, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
18
|
+
const { className, style, setFocus, nativeKeyHandler, size, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
19
19
|
const inputElementRef = React.useRef();
|
|
20
20
|
const refs = (0, useRefs_1.useRefs)(inputElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
|
|
21
21
|
React.useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/core-react/inputs/Input.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,2CAAoC;AACpC,+BAA+B;AAC/B,wDAA8D;AAC9D,oDAAiD;AAgBjD,0GAA0G;AAC1G,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAkC,8CAA8C;AACtH,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACjC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC,CAAC,wDAAwD;
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/core-react/inputs/Input.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,2CAAoC;AACpC,+BAA+B;AAC/B,wDAA8D;AAC9D,oDAAiD;AAgBjD,0GAA0G;AAC1G,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAkC,8CAA8C;AACtH,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACjC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC,CAAC,wDAAwD;IAC7I,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,EAAoB,CAAC;IACzD,MAAM,IAAI,GAAG,IAAA,iBAAO,EAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAE,uGAAuG;IAEpJ,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,cAAc,GAAG,eAAe,CAAC,OAAO,CAAC;QAC/C,MAAM,cAAc,GAAG,gBAAgB,CAAC;QAExC,IAAI,cAAc,IAAI,cAAc,EAAE;YACpC,cAAc,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;SAC5D;QACD,OAAO,GAAG,EAAE;YACV,IAAI,cAAc,IAAI,cAAc,EAAE;gBACpC,cAAc,CAAC,mBAAmB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;aAC/D;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,eAAe,CAAC,OAAO,IAAI,QAAQ;YACrC,eAAe,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyC,EAAE,EAAE;QAClF,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,qBAAa,IAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,KAAK,UAAU,EAAE,OAAO,EAAE,WAAW,EACxE,SAAS,EAAE,IAAA,oBAAU,EAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,CAC5E,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;;GAGG;AACU,QAAA,KAAK,GAA8C,eAAe,CAAC,CAAE,8CAA8C","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Inputs\r\n */\r\n\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Input as ITwinUI_Input } from \"@itwin/itwinui-react\";\r\nimport { useRefs } from \"../utils/hooks/useRefs\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for the [[Input]] component\r\n * @public\r\n * @deprecated Use InputProps in itwinui-react instead\r\n */\r\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonProps {\r\n /** Indicates whether to set focus to the input element */\r\n setFocus?: boolean;\r\n /** Native keydown event handler */\r\n nativeKeyHandler?: (e: KeyboardEvent) => void;\r\n /** Provides ability to return reference to HTMLInputElement */\r\n ref?: React.Ref<HTMLInputElement>;\r\n}\r\n\r\n// Defined using following pattern (const Input at bottom) to ensure useful API documentation is extracted\r\nconst ForwardRefInput = React.forwardRef<HTMLInputElement, InputProps>( // eslint-disable-line deprecation/deprecation\r\n function ForwardRefInput(props, ref) {\r\n const { className, style, setFocus, nativeKeyHandler, size, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n const inputElementRef = React.useRef<HTMLInputElement>();\r\n const refs = useRefs(inputElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\r\n\r\n React.useEffect(() => {\r\n const currentElement = inputElementRef.current;\r\n const currentHandler = nativeKeyHandler;\r\n\r\n if (currentElement && currentHandler) {\r\n currentElement.addEventListener(\"keydown\", currentHandler);\r\n }\r\n return () => {\r\n if (currentHandler && currentElement) {\r\n currentElement.removeEventListener(\"keydown\", currentHandler);\r\n }\r\n };\r\n }, [nativeKeyHandler]);\r\n\r\n React.useEffect(() => {\r\n if (inputElementRef.current && setFocus)\r\n inputElementRef.current.focus();\r\n }, [setFocus]);\r\n\r\n const handleFocus = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n event.currentTarget.select();\r\n }, []);\r\n\r\n return (\r\n <ITwinUI_Input ref={refs} type=\"text\" {...otherProps} onFocus={handleFocus}\r\n className={classnames(\"uicore-inputs-input\", className)} style={style} />\r\n );\r\n }\r\n);\r\n\r\n/** Basic text input, is a wrapper for the `<input type=\"text\">` HTML element.\r\n * @public\r\n * @deprecated Use Input in itwinui-react instead\r\n */\r\nexport const Input: (props: InputProps) => JSX.Element | null = ForwardRefInput; // eslint-disable-line deprecation/deprecation\r\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../../src/core-react/slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Slider\r\n */\r\n\r\nimport \"./Slider.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Slider as ItwinSlider } from \"@itwin/itwinui-react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { BodyText } from \"../text/BodyText\";\r\n\r\n// cspell:ignore pushable\r\n\r\n/** Properties for [[Slider]] component\r\n * @public\r\n */\r\nexport interface SliderProps extends CommonProps {\r\n /** Values to set Slider to initially */\r\n values: number[];\r\n /** Minimum value */\r\n min: number;\r\n /** Maximum value */\r\n max: number;\r\n /** Format the min display value */\r\n formatMin?: (value: number) => string;\r\n /** Format the max display value */\r\n formatMax?: (value: number) => string;\r\n\r\n /** Step value. Default is 0.1. */\r\n step?: number;\r\n /** The interaction mode. Default is 1. Possible values:\r\n * 1 - allows handles to cross each other.\r\n * 2 - keeps the sliders from crossing and separated by a step.\r\n */\r\n mode?: number | (() => number);\r\n /** Indicates whether the display of the Slider values is reversed. */\r\n reversed?: boolean;\r\n /** Indicates whether the Slider is disabled. */\r\n disabled?: boolean;\r\n /** Indicates whether to compensate for the tick marks when determining the width. */\r\n includeTicksInWidth?: boolean;\r\n\r\n /** Indicates whether to show tooltip with the value. The tooltip will be positioned above the Slider, by default. */\r\n showTooltip?: boolean;\r\n /** Indicates whether the tooltip should show below the Slider instead of above. */\r\n tooltipBelow?: boolean;\r\n /** Format a value for the tooltip */\r\n formatTooltip?: (value: number) => string;\r\n\r\n /** Indicates whether to show min & max values to the left & right of the Slider. */\r\n showMinMax?: boolean;\r\n /** Image to show for min. */\r\n minImage?: React.ReactNode;\r\n /** Image to show for max. */\r\n maxImage?: React.ReactNode;\r\n\r\n /** Indicates whether to show tick marks under the Slider. */\r\n showTicks?: boolean;\r\n /** Indicates whether to show tick labels under the tick marks. */\r\n showTickLabels?: boolean;\r\n /** Format a tick mark value */\r\n formatTick?: (tick: number) => string;\r\n /** Function to get the tick count. The default tick count is 10. */\r\n getTickCount?: () => number;\r\n /** Function to get the tick values. This overrides the tick count from getTickCount.\r\n * Use this prop if you want to specify your own tick values instead of ticks generated by the slider.\r\n * The numbers should be valid numbers in the domain and correspond to the step value.\r\n * Invalid values will be coerced to the closet matching value in the domain.\r\n */\r\n getTickValues?: () => number[];\r\n\r\n /** Listens for value changes.\r\n * Triggered when the value of the slider has changed. This will receive changes at\r\n * the end of a slide as well as changes from clicks on rails and tracks.\r\n */\r\n onChange?: (values: ReadonlyArray<number>) => void;\r\n /** Listens for value updates.\r\n * Called with the values at each update (caution: high-volume updates when dragging).\r\n */\r\n onUpdate?: (values: ReadonlyArray<number>) => void;\r\n /** No longer available use onUpdate. */\r\n onSlideStart?: (values: ReadonlyArray<number>) => void;\r\n /** No longer available use onChange. */\r\n onSlideEnd?: (values: ReadonlyArray<number>) => void;\r\n}\r\n\r\n/**\r\n * Slider React component displays a range slider.\r\n * @public\r\n * @deprecated Use Slider in itwinui-react instead\r\n */\r\nexport function Slider(props: SliderProps) {\r\n const { className, style, min, max, values, step, mode,\r\n formatMin, formatMax,\r\n onChange, onUpdate,\r\n showTicks, showTickLabels, formatTick, getTickCount, getTickValues, includeTicksInWidth,\r\n reversed, disabled,\r\n showMinMax, minImage, maxImage,\r\n showTooltip, tooltipBelow, formatTooltip,\r\n } = props;\r\n\r\n const containerClassNames = classnames(\r\n \"core-slider-container\",\r\n className,\r\n disabled && \"core-disabled\",\r\n showTickLabels && \"core-slider-tickLabels\",\r\n includeTicksInWidth && \"core-slider-includeTicksInWidth\",\r\n );\r\n const sliderClassNames = classnames(\r\n \"core-slider\",\r\n showMinMax && \"core-slider-minMax\",\r\n );\r\n\r\n const internalFormatTooltip = React.useCallback((value: number) => {\r\n if (formatTooltip)\r\n return formatTooltip(value);\r\n\r\n const actualStep = Math.abs(step ?? 1);\r\n\r\n if (Number.isInteger(actualStep))\r\n return value.toFixed(0);\r\n\r\n const stepString = actualStep.toString();\r\n const decimalIndex = stepString.indexOf(\".\");\r\n const numDecimals = actualStep.toString().length - (decimalIndex + 1);\r\n return value.toFixed(numDecimals);\r\n }, [formatTooltip, step]);\r\n\r\n const tooltipProps = React.useCallback((_index: number, val: number) => {\r\n const content = internalFormatTooltip(val);\r\n if (!showTooltip)\r\n return { visible: false };\r\n return { placement: tooltipBelow ? \"bottom\" : \"top\", content };\r\n }, [internalFormatTooltip, showTooltip, tooltipBelow]);\r\n\r\n const tickLabels = React.useMemo(() => {\r\n let ticks: string[] | undefined;\r\n\r\n if (showTicks) {\r\n const count = getTickCount ? getTickCount() : 0;\r\n if (count) {\r\n ticks = [];\r\n const increment = (max - min) / count;\r\n for (let i = 0; i <= count; i++) {\r\n const value = (i * increment) + min;\r\n if (showTickLabels) {\r\n const label = formatTick ? formatTick(value) : internalFormatTooltip(value);\r\n ticks.push(label);\r\n } else {\r\n ticks.push(\"\");\r\n }\r\n }\r\n } else /* istanbul ignore else */ if (getTickValues) {\r\n return getTickValues().map((val: number) => formatTick ? formatTick(val) : internalFormatTooltip(val));\r\n }\r\n }\r\n return ticks;\r\n }, [formatTick, getTickCount, getTickValues, internalFormatTooltip, max, min, showTickLabels, showTicks]);\r\n\r\n const thumbMode = React.useMemo(() => {\r\n let inMode = 1;\r\n if (typeof mode === \"function\")\r\n inMode = mode();\r\n\r\n return 1 === inMode ? \"allow-crossing\" : \"inhibit-crossing\";\r\n }, [mode]);\r\n\r\n return (\r\n <div className={containerClassNames} style={style}>\r\n {showMinMax &&\r\n <MinMax value={min} testId=\"core-slider-min\" image={minImage} format={formatMin} />\r\n }\r\n <ItwinSlider\r\n className={sliderClassNames}\r\n values={values}\r\n min={min}\r\n max={max}\r\n step={step}\r\n thumbMode={thumbMode}\r\n trackDisplayMode={!reversed ? \"auto\" : \"odd-segments\"\r\n }\r\n disabled={disabled}\r\n minLabel=\"\"\r\n maxLabel=\"\"\r\n tooltipProps={tooltipProps}\r\n tickLabels={tickLabels}\r\n onChange={onChange}\r\n onUpdate={onUpdate}\r\n />\r\n {showMinMax &&\r\n <MinMax value={max} testId=\"core-slider-max\" image={maxImage} format={formatMax} />\r\n }\r\n </div>\r\n );\r\n}\r\n\r\n/** Properties for [[MinMax]] component */\r\ninterface MinMaxProps {\r\n value: number;\r\n testId: string;\r\n image?: React.ReactNode;\r\n format?: (value: number) => string;\r\n}\r\n\r\n/** MinMax component for Slider */\r\nfunction MinMax(props: MinMaxProps) {\r\n const { value, testId, image, format } = props;\r\n let element: React.ReactElement<any>;\r\n const displayValue = format !== undefined ? format(value) : value;\r\n\r\n if (image)\r\n element = <>{image}</>;\r\n else\r\n element = <BodyText className=\"core-slider-minmax\" data-testid={testId}>{displayValue}</BodyText>;\r\n\r\n return element;\r\n}\r\n"]}
|
|
1
|
+
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../../src/core-react/slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Slider\r\n */\r\n\r\nimport \"./Slider.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Slider as ItwinSlider } from \"@itwin/itwinui-react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { BodyText } from \"../text/BodyText\";\r\n\r\n// cspell:ignore pushable\r\n\r\n/** Properties for [[Slider]] component\r\n * @public\r\n */\r\nexport interface SliderProps extends CommonProps {\r\n /** Values to set Slider to initially */\r\n values: number[];\r\n /** Minimum value */\r\n min: number;\r\n /** Maximum value */\r\n max: number;\r\n /** Format the min display value */\r\n formatMin?: (value: number) => string;\r\n /** Format the max display value */\r\n formatMax?: (value: number) => string;\r\n\r\n /** Step value. Default is 0.1. */\r\n step?: number;\r\n /** The interaction mode. Default is 1. Possible values:\r\n * 1 - allows handles to cross each other.\r\n * 2 - keeps the sliders from crossing and separated by a step.\r\n */\r\n mode?: number | (() => number);\r\n /** Indicates whether the display of the Slider values is reversed. */\r\n reversed?: boolean;\r\n /** Indicates whether the Slider is disabled. */\r\n disabled?: boolean;\r\n /** Indicates whether to compensate for the tick marks when determining the width. */\r\n includeTicksInWidth?: boolean;\r\n\r\n /** Indicates whether to show tooltip with the value. The tooltip will be positioned above the Slider, by default. */\r\n showTooltip?: boolean;\r\n /** Indicates whether the tooltip should show below the Slider instead of above. */\r\n tooltipBelow?: boolean;\r\n /** Format a value for the tooltip */\r\n formatTooltip?: (value: number) => string;\r\n\r\n /** Indicates whether to show min & max values to the left & right of the Slider. */\r\n showMinMax?: boolean;\r\n /** Image to show for min. */\r\n minImage?: React.ReactNode;\r\n /** Image to show for max. */\r\n maxImage?: React.ReactNode;\r\n\r\n /** Indicates whether to show tick marks under the Slider. */\r\n showTicks?: boolean;\r\n /** Indicates whether to show tick labels under the tick marks. */\r\n showTickLabels?: boolean;\r\n /** Format a tick mark value */\r\n formatTick?: (tick: number) => string;\r\n /** Function to get the tick count. The default tick count is 10. */\r\n getTickCount?: () => number;\r\n /** Function to get the tick values. This overrides the tick count from getTickCount.\r\n * Use this prop if you want to specify your own tick values instead of ticks generated by the slider.\r\n * The numbers should be valid numbers in the domain and correspond to the step value.\r\n * Invalid values will be coerced to the closet matching value in the domain.\r\n */\r\n getTickValues?: () => number[];\r\n\r\n /** Listens for value changes.\r\n * Triggered when the value of the slider has changed. This will receive changes at\r\n * the end of a slide as well as changes from clicks on rails and tracks.\r\n */\r\n onChange?: (values: ReadonlyArray<number>) => void;\r\n /** Listens for value updates.\r\n * Called with the values at each update (caution: high-volume updates when dragging).\r\n */\r\n onUpdate?: (values: ReadonlyArray<number>) => void;\r\n /** No longer available use onUpdate. */\r\n onSlideStart?: (values: ReadonlyArray<number>) => void;\r\n /** No longer available use onChange. */\r\n onSlideEnd?: (values: ReadonlyArray<number>) => void;\r\n}\r\n\r\n/**\r\n * Slider React component displays a range slider.\r\n * @public\r\n * @deprecated Use Slider in itwinui-react instead\r\n */\r\nexport function Slider(props: SliderProps) {\r\n const { className, style, min, max, values, step, mode,\r\n formatMin, formatMax,\r\n onChange, onUpdate,\r\n showTicks, showTickLabels, formatTick, getTickCount, getTickValues, includeTicksInWidth,\r\n reversed, disabled,\r\n showMinMax, minImage, maxImage,\r\n showTooltip, tooltipBelow, formatTooltip,\r\n } = props;\r\n\r\n const containerClassNames = classnames(\r\n \"core-slider-container\",\r\n className,\r\n disabled && \"core-disabled\",\r\n showTickLabels && \"core-slider-tickLabels\",\r\n includeTicksInWidth && \"core-slider-includeTicksInWidth\",\r\n );\r\n const sliderClassNames = classnames(\r\n \"core-slider\",\r\n showMinMax && \"core-slider-minMax\",\r\n );\r\n\r\n const internalFormatTooltip = React.useCallback((value: number) => {\r\n if (formatTooltip)\r\n return formatTooltip(value);\r\n\r\n const actualStep = Math.abs(step ?? 1);\r\n\r\n if (Number.isInteger(actualStep))\r\n return value.toFixed(0);\r\n\r\n const stepString = actualStep.toString();\r\n const decimalIndex = stepString.indexOf(\".\");\r\n const numDecimals = actualStep.toString().length - (decimalIndex + 1);\r\n return value.toFixed(numDecimals);\r\n }, [formatTooltip, step]);\r\n\r\n const tooltipProps = React.useCallback((_index: number, val: number) => {\r\n const content = internalFormatTooltip(val);\r\n if (!showTooltip)\r\n return { visible: false };\r\n return { placement: tooltipBelow ? \"bottom\" : \"top\", content } as const;\r\n }, [internalFormatTooltip, showTooltip, tooltipBelow]);\r\n\r\n const tickLabels = React.useMemo(() => {\r\n let ticks: string[] | undefined;\r\n\r\n if (showTicks) {\r\n const count = getTickCount ? getTickCount() : 0;\r\n if (count) {\r\n ticks = [];\r\n const increment = (max - min) / count;\r\n for (let i = 0; i <= count; i++) {\r\n const value = (i * increment) + min;\r\n if (showTickLabels) {\r\n const label = formatTick ? formatTick(value) : internalFormatTooltip(value);\r\n ticks.push(label);\r\n } else {\r\n ticks.push(\"\");\r\n }\r\n }\r\n } else /* istanbul ignore else */ if (getTickValues) {\r\n return getTickValues().map((val: number) => formatTick ? formatTick(val) : internalFormatTooltip(val));\r\n }\r\n }\r\n return ticks;\r\n }, [formatTick, getTickCount, getTickValues, internalFormatTooltip, max, min, showTickLabels, showTicks]);\r\n\r\n const thumbMode = React.useMemo(() => {\r\n let inMode = 1;\r\n if (typeof mode === \"function\")\r\n inMode = mode();\r\n\r\n return 1 === inMode ? \"allow-crossing\" : \"inhibit-crossing\";\r\n }, [mode]);\r\n\r\n return (\r\n <div className={containerClassNames} style={style}>\r\n {showMinMax &&\r\n <MinMax value={min} testId=\"core-slider-min\" image={minImage} format={formatMin} />\r\n }\r\n <ItwinSlider\r\n className={sliderClassNames}\r\n values={values}\r\n min={min}\r\n max={max}\r\n step={step}\r\n thumbMode={thumbMode}\r\n trackDisplayMode={!reversed ? \"auto\" : \"odd-segments\"\r\n }\r\n disabled={disabled}\r\n minLabel=\"\"\r\n maxLabel=\"\"\r\n tooltipProps={tooltipProps}\r\n tickLabels={tickLabels}\r\n onChange={onChange}\r\n onUpdate={onUpdate}\r\n />\r\n {showMinMax &&\r\n <MinMax value={max} testId=\"core-slider-max\" image={maxImage} format={formatMax} />\r\n }\r\n </div>\r\n );\r\n}\r\n\r\n/** Properties for [[MinMax]] component */\r\ninterface MinMaxProps {\r\n value: number;\r\n testId: string;\r\n image?: React.ReactNode;\r\n format?: (value: number) => string;\r\n}\r\n\r\n/** MinMax component for Slider */\r\nfunction MinMax(props: MinMaxProps) {\r\n const { value, testId, image, format } = props;\r\n let element: React.ReactElement<any>;\r\n const displayValue = format !== undefined ? format(value) : value;\r\n\r\n if (image)\r\n element = <>{image}</>;\r\n else\r\n element = <BodyText className=\"core-slider-minmax\" data-testid={testId}>{displayValue}</BodyText>;\r\n\r\n return element;\r\n}\r\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/core-react/button/Button.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;;GAGG;AACH,oBAAY,UAAU;IACpB,OAAO,KAAK;IACZ,KAAK,UAAU;CAChB;AAED;;;GAGG;AACH,oBAAY,UAAU;IACpB,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,QAAQ,aAAa;IACrB,MAAM,WAAW;CAClB;AAED;;;GAGG;AACH,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW;IAC7F,sCAAsC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8BAA8B;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,kDAAkD;IAClD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,uDAAuD;IACvD,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC,CAAC;CAC9E;AAED;;;GAGG;AACH,qBAAa,MAAO,SAAQ,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC;IAC1D,OAAO,CAAC,gBAAgB,CAetB;IAEc,MAAM;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/core-react/button/Button.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;;GAGG;AACH,oBAAY,UAAU;IACpB,OAAO,KAAK;IACZ,KAAK,UAAU;CAChB;AAED;;;GAGG;AACH,oBAAY,UAAU;IACpB,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,QAAQ,aAAa;IACrB,MAAM,WAAW;CAClB;AAED;;;GAGG;AACH,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW;IAC7F,sCAAsC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8BAA8B;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,kDAAkD;IAClD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,uDAAuD;IACvD,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC,CAAC;CAC9E;AAED;;;GAGG;AACH,qBAAa,MAAO,SAAQ,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC;IAC1D,OAAO,CAAC,gBAAgB,CAetB;IAEc,MAAM;CAQvB;AAED,gBAAgB;AAChB,wBAAgB,sBAAsB,CAAC,UAAU,CAAC,EAAE,UAAU,GAAG,MAAM,CAkBtE"}
|
|
@@ -54,10 +54,8 @@ export class Button extends React.PureComponent {
|
|
|
54
54
|
render() {
|
|
55
55
|
const { buttonType, size, className, style, onClick, ...props } = this.props;
|
|
56
56
|
const iuiButtonType = this.getIuiButtonType(buttonType);
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
iuiButtonSize = undefined;
|
|
60
|
-
return React.createElement(ITwinUI_Button, { ...props, className: className, style: style, onClick: onClick, styleType: iuiButtonType, size: iuiButtonSize });
|
|
57
|
+
// eslint-disable-next-line deprecation/deprecation
|
|
58
|
+
return React.createElement(ITwinUI_Button, { ...props, className: className, style: style, onClick: onClick, styleType: iuiButtonType, size: size === ButtonSize.Large ? undefined : "small" });
|
|
61
59
|
}
|
|
62
60
|
}
|
|
63
61
|
/** @internal */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/core-react/button/Button.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,cAAc,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/core-react/button/Button.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,cAAc,EAAsC,MAAM,sBAAsB,CAAC;AAGpG;;;GAGG;AACH,MAAM,CAAN,IAAY,UAGX;AAHD,WAAY,UAAU;IACpB,0BAAY,CAAA;IACZ,6BAAe,CAAA;AACjB,CAAC,EAHW,UAAU,KAAV,UAAU,QAGrB;AAED;;;GAGG;AACH,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,iCAAmB,CAAA;IACnB,2BAAa,CAAA;IACb,mCAAqB,CAAA;IACrB,+BAAiB,CAAA;AACnB,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB;AAiBD;;;GAGG;AACH,MAAM,OAAO,MAAO,SAAQ,KAAK,CAAC,aAA0B;IAA5D;;QACU,qBAAgB,GAAG,CAAC,UAAuB,EAAE,EAAE;YACrD,IAAI,aAA+C,CAAC;YACpD,QAAQ,UAAU,EAAE;gBAClB,KAAK,UAAU,CAAC,IAAI,EAAE,8CAA8C;oBAClE,aAAa,GAAG,iBAAiB,CAAC;oBAClC,MAAM;gBACR,KAAK,UAAU,CAAC,MAAM,EAAE,8CAA8C;oBACpE,aAAa,GAAG,SAAS,CAAC;oBAC1B,MAAM;gBACR,KAAK,UAAU,CAAC,OAAO,CAAC,CAAE,8CAA8C;gBACxE;oBACE,aAAa,GAAG,KAAK,CAAC;oBACtB,MAAM;aACT;YACD,OAAO,aAAa,CAAC;QACvB,CAAC,CAAC;IAUJ,CAAC;IARiB,MAAM;QACpB,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAE7E,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;QAExD,mDAAmD;QACnD,OAAO,oBAAC,cAAc,OAAK,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,KAAK,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,GAAI,CAAC;IAC9K,CAAC;CACF;AAED,gBAAgB;AAChB,MAAM,UAAU,sBAAsB,CAAC,UAAuB;IAC5D,IAAI,aAAqB,CAAC;IAC1B,QAAQ,UAAU,EAAE;QAClB,KAAK,UAAU,CAAC,IAAI,EAAE,8CAA8C;YAClE,aAAa,GAAG,qBAAqB,CAAC;YACtC,MAAM;QACR,KAAK,UAAU,CAAC,QAAQ,EAAE,8CAA8C;YACtE,aAAa,GAAG,yBAAyB,CAAC;YAC1C,MAAM;QACR,KAAK,UAAU,CAAC,MAAM,EAAE,8CAA8C;YACpE,aAAa,GAAG,uBAAuB,CAAC;YACxC,MAAM;QACR,KAAK,UAAU,CAAC,OAAO,CAAC,CAAE,8CAA8C;QACxE;YACE,aAAa,GAAG,wBAAwB,CAAC;YACzC,MAAM;KACT;IACD,OAAO,aAAa,CAAC;AACvB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Button\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { Button as ITwinUI_Button, ButtonProps as ITwinUI_ButtonProps } from \"@itwin/itwinui-react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Sizes for [[Button]] component\r\n * @public\r\n * @deprecated Use `size` prop for itwinui-react Button instead\r\n */\r\nexport enum ButtonSize {\r\n Default = \"\",\r\n Large = \"large\",\r\n}\r\n\r\n/** Types for [[Button]] component\r\n * @public\r\n * @deprecated Use `styleType` prop for itwinui-react Button instead\r\n */\r\nexport enum ButtonType {\r\n Primary = \"primary\",\r\n Blue = \"blue\",\r\n Disabled = \"disabled\",\r\n Hollow = \"hollow\",\r\n}\r\n\r\n/** Properties for [[Button]] component\r\n * @public\r\n * @deprecated Use ButtonProps from itwinui-react instead\r\n */\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n /** Allow ID to be passed to Button */\r\n id?: string;\r\n /** Default and large sizes */\r\n size?: ButtonSize; // eslint-disable-line deprecation/deprecation\r\n /** 4 styles to tweak the content of the button */\r\n buttonType?: ButtonType; // eslint-disable-line deprecation/deprecation\r\n /** A function to be run when the element is clicked */\r\n onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void);\r\n}\r\n\r\n/** Generic button component\r\n * @public\r\n * @deprecated Use Button from itwinui-react instead\r\n */\r\nexport class Button extends React.PureComponent<ButtonProps> { // eslint-disable-line deprecation/deprecation\r\n private getIuiButtonType = (buttonType?: ButtonType) => { // eslint-disable-line deprecation/deprecation\r\n let iuiButtonType: ITwinUI_ButtonProps[\"styleType\"];\r\n switch (buttonType) {\r\n case ButtonType.Blue: // eslint-disable-line deprecation/deprecation\r\n iuiButtonType = \"high-visibility\";\r\n break;\r\n case ButtonType.Hollow: // eslint-disable-line deprecation/deprecation\r\n iuiButtonType = \"default\";\r\n break;\r\n case ButtonType.Primary: // eslint-disable-line deprecation/deprecation\r\n default:\r\n iuiButtonType = \"cta\";\r\n break;\r\n }\r\n return iuiButtonType;\r\n };\r\n\r\n public override render() {\r\n const { buttonType, size, className, style, onClick, ...props } = this.props;\r\n\r\n const iuiButtonType = this.getIuiButtonType(buttonType);\r\n\r\n // eslint-disable-next-line deprecation/deprecation\r\n return <ITwinUI_Button {...props} className={className} style={style} onClick={onClick} styleType={iuiButtonType} size={size === ButtonSize.Large ? undefined : \"small\"} />;\r\n }\r\n}\r\n\r\n/** @internal */\r\nexport function getButtonTypeClassName(buttonType?: ButtonType): string { // eslint-disable-line deprecation/deprecation\r\n let typeClassName: string;\r\n switch (buttonType) {\r\n case ButtonType.Blue: // eslint-disable-line deprecation/deprecation\r\n typeClassName = \"uicore-buttons-blue\";\r\n break;\r\n case ButtonType.Disabled: // eslint-disable-line deprecation/deprecation\r\n typeClassName = \"uicore-buttons-disabled\";\r\n break;\r\n case ButtonType.Hollow: // eslint-disable-line deprecation/deprecation\r\n typeClassName = \"uicore-buttons-hollow\";\r\n break;\r\n case ButtonType.Primary: // eslint-disable-line deprecation/deprecation\r\n default:\r\n typeClassName = \"uicore-buttons-primary\";\r\n break;\r\n }\r\n return typeClassName;\r\n}\r\n"]}
|
|
@@ -12,7 +12,7 @@ import { useRefs } from "../utils/hooks/useRefs";
|
|
|
12
12
|
// Defined using following pattern (const Input at bottom) to ensure useful API documentation is extracted
|
|
13
13
|
const ForwardRefInput = React.forwardRef(// eslint-disable-line deprecation/deprecation
|
|
14
14
|
function ForwardRefInput(props, ref) {
|
|
15
|
-
const { className, style, setFocus, nativeKeyHandler, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
15
|
+
const { className, style, setFocus, nativeKeyHandler, size, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
16
16
|
const inputElementRef = React.useRef();
|
|
17
17
|
const refs = useRefs(inputElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
|
|
18
18
|
React.useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/core-react/inputs/Input.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAgBjD,0GAA0G;AAC1G,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAkC,8CAA8C;AACtH,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACjC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC,CAAC,wDAAwD;
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/core-react/inputs/Input.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAgBjD,0GAA0G;AAC1G,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAkC,8CAA8C;AACtH,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACjC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC,CAAC,wDAAwD;IAC7I,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,EAAoB,CAAC;IACzD,MAAM,IAAI,GAAG,OAAO,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAE,uGAAuG;IAEpJ,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,cAAc,GAAG,eAAe,CAAC,OAAO,CAAC;QAC/C,MAAM,cAAc,GAAG,gBAAgB,CAAC;QAExC,IAAI,cAAc,IAAI,cAAc,EAAE;YACpC,cAAc,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;SAC5D;QACD,OAAO,GAAG,EAAE;YACV,IAAI,cAAc,IAAI,cAAc,EAAE;gBACpC,cAAc,CAAC,mBAAmB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;aAC/D;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,eAAe,CAAC,OAAO,IAAI,QAAQ;YACrC,eAAe,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyC,EAAE,EAAE;QAClF,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,aAAa,IAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,KAAK,UAAU,EAAE,OAAO,EAAE,WAAW,EACxE,SAAS,EAAE,UAAU,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,CAC5E,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,KAAK,GAA8C,eAAe,CAAC,CAAE,8CAA8C","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Inputs\r\n */\r\n\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Input as ITwinUI_Input } from \"@itwin/itwinui-react\";\r\nimport { useRefs } from \"../utils/hooks/useRefs\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for the [[Input]] component\r\n * @public\r\n * @deprecated Use InputProps in itwinui-react instead\r\n */\r\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonProps {\r\n /** Indicates whether to set focus to the input element */\r\n setFocus?: boolean;\r\n /** Native keydown event handler */\r\n nativeKeyHandler?: (e: KeyboardEvent) => void;\r\n /** Provides ability to return reference to HTMLInputElement */\r\n ref?: React.Ref<HTMLInputElement>;\r\n}\r\n\r\n// Defined using following pattern (const Input at bottom) to ensure useful API documentation is extracted\r\nconst ForwardRefInput = React.forwardRef<HTMLInputElement, InputProps>( // eslint-disable-line deprecation/deprecation\r\n function ForwardRefInput(props, ref) {\r\n const { className, style, setFocus, nativeKeyHandler, size, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n const inputElementRef = React.useRef<HTMLInputElement>();\r\n const refs = useRefs(inputElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\r\n\r\n React.useEffect(() => {\r\n const currentElement = inputElementRef.current;\r\n const currentHandler = nativeKeyHandler;\r\n\r\n if (currentElement && currentHandler) {\r\n currentElement.addEventListener(\"keydown\", currentHandler);\r\n }\r\n return () => {\r\n if (currentHandler && currentElement) {\r\n currentElement.removeEventListener(\"keydown\", currentHandler);\r\n }\r\n };\r\n }, [nativeKeyHandler]);\r\n\r\n React.useEffect(() => {\r\n if (inputElementRef.current && setFocus)\r\n inputElementRef.current.focus();\r\n }, [setFocus]);\r\n\r\n const handleFocus = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n event.currentTarget.select();\r\n }, []);\r\n\r\n return (\r\n <ITwinUI_Input ref={refs} type=\"text\" {...otherProps} onFocus={handleFocus}\r\n className={classnames(\"uicore-inputs-input\", className)} style={style} />\r\n );\r\n }\r\n);\r\n\r\n/** Basic text input, is a wrapper for the `<input type=\"text\">` HTML element.\r\n * @public\r\n * @deprecated Use Input in itwinui-react instead\r\n */\r\nexport const Input: (props: InputProps) => JSX.Element | null = ForwardRefInput; // eslint-disable-line deprecation/deprecation\r\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../../src/core-react/slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Slider\r\n */\r\n\r\nimport \"./Slider.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Slider as ItwinSlider } from \"@itwin/itwinui-react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { BodyText } from \"../text/BodyText\";\r\n\r\n// cspell:ignore pushable\r\n\r\n/** Properties for [[Slider]] component\r\n * @public\r\n */\r\nexport interface SliderProps extends CommonProps {\r\n /** Values to set Slider to initially */\r\n values: number[];\r\n /** Minimum value */\r\n min: number;\r\n /** Maximum value */\r\n max: number;\r\n /** Format the min display value */\r\n formatMin?: (value: number) => string;\r\n /** Format the max display value */\r\n formatMax?: (value: number) => string;\r\n\r\n /** Step value. Default is 0.1. */\r\n step?: number;\r\n /** The interaction mode. Default is 1. Possible values:\r\n * 1 - allows handles to cross each other.\r\n * 2 - keeps the sliders from crossing and separated by a step.\r\n */\r\n mode?: number | (() => number);\r\n /** Indicates whether the display of the Slider values is reversed. */\r\n reversed?: boolean;\r\n /** Indicates whether the Slider is disabled. */\r\n disabled?: boolean;\r\n /** Indicates whether to compensate for the tick marks when determining the width. */\r\n includeTicksInWidth?: boolean;\r\n\r\n /** Indicates whether to show tooltip with the value. The tooltip will be positioned above the Slider, by default. */\r\n showTooltip?: boolean;\r\n /** Indicates whether the tooltip should show below the Slider instead of above. */\r\n tooltipBelow?: boolean;\r\n /** Format a value for the tooltip */\r\n formatTooltip?: (value: number) => string;\r\n\r\n /** Indicates whether to show min & max values to the left & right of the Slider. */\r\n showMinMax?: boolean;\r\n /** Image to show for min. */\r\n minImage?: React.ReactNode;\r\n /** Image to show for max. */\r\n maxImage?: React.ReactNode;\r\n\r\n /** Indicates whether to show tick marks under the Slider. */\r\n showTicks?: boolean;\r\n /** Indicates whether to show tick labels under the tick marks. */\r\n showTickLabels?: boolean;\r\n /** Format a tick mark value */\r\n formatTick?: (tick: number) => string;\r\n /** Function to get the tick count. The default tick count is 10. */\r\n getTickCount?: () => number;\r\n /** Function to get the tick values. This overrides the tick count from getTickCount.\r\n * Use this prop if you want to specify your own tick values instead of ticks generated by the slider.\r\n * The numbers should be valid numbers in the domain and correspond to the step value.\r\n * Invalid values will be coerced to the closet matching value in the domain.\r\n */\r\n getTickValues?: () => number[];\r\n\r\n /** Listens for value changes.\r\n * Triggered when the value of the slider has changed. This will receive changes at\r\n * the end of a slide as well as changes from clicks on rails and tracks.\r\n */\r\n onChange?: (values: ReadonlyArray<number>) => void;\r\n /** Listens for value updates.\r\n * Called with the values at each update (caution: high-volume updates when dragging).\r\n */\r\n onUpdate?: (values: ReadonlyArray<number>) => void;\r\n /** No longer available use onUpdate. */\r\n onSlideStart?: (values: ReadonlyArray<number>) => void;\r\n /** No longer available use onChange. */\r\n onSlideEnd?: (values: ReadonlyArray<number>) => void;\r\n}\r\n\r\n/**\r\n * Slider React component displays a range slider.\r\n * @public\r\n * @deprecated Use Slider in itwinui-react instead\r\n */\r\nexport function Slider(props: SliderProps) {\r\n const { className, style, min, max, values, step, mode,\r\n formatMin, formatMax,\r\n onChange, onUpdate,\r\n showTicks, showTickLabels, formatTick, getTickCount, getTickValues, includeTicksInWidth,\r\n reversed, disabled,\r\n showMinMax, minImage, maxImage,\r\n showTooltip, tooltipBelow, formatTooltip,\r\n } = props;\r\n\r\n const containerClassNames = classnames(\r\n \"core-slider-container\",\r\n className,\r\n disabled && \"core-disabled\",\r\n showTickLabels && \"core-slider-tickLabels\",\r\n includeTicksInWidth && \"core-slider-includeTicksInWidth\",\r\n );\r\n const sliderClassNames = classnames(\r\n \"core-slider\",\r\n showMinMax && \"core-slider-minMax\",\r\n );\r\n\r\n const internalFormatTooltip = React.useCallback((value: number) => {\r\n if (formatTooltip)\r\n return formatTooltip(value);\r\n\r\n const actualStep = Math.abs(step ?? 1);\r\n\r\n if (Number.isInteger(actualStep))\r\n return value.toFixed(0);\r\n\r\n const stepString = actualStep.toString();\r\n const decimalIndex = stepString.indexOf(\".\");\r\n const numDecimals = actualStep.toString().length - (decimalIndex + 1);\r\n return value.toFixed(numDecimals);\r\n }, [formatTooltip, step]);\r\n\r\n const tooltipProps = React.useCallback((_index: number, val: number) => {\r\n const content = internalFormatTooltip(val);\r\n if (!showTooltip)\r\n return { visible: false };\r\n return { placement: tooltipBelow ? \"bottom\" : \"top\", content };\r\n }, [internalFormatTooltip, showTooltip, tooltipBelow]);\r\n\r\n const tickLabels = React.useMemo(() => {\r\n let ticks: string[] | undefined;\r\n\r\n if (showTicks) {\r\n const count = getTickCount ? getTickCount() : 0;\r\n if (count) {\r\n ticks = [];\r\n const increment = (max - min) / count;\r\n for (let i = 0; i <= count; i++) {\r\n const value = (i * increment) + min;\r\n if (showTickLabels) {\r\n const label = formatTick ? formatTick(value) : internalFormatTooltip(value);\r\n ticks.push(label);\r\n } else {\r\n ticks.push(\"\");\r\n }\r\n }\r\n } else /* istanbul ignore else */ if (getTickValues) {\r\n return getTickValues().map((val: number) => formatTick ? formatTick(val) : internalFormatTooltip(val));\r\n }\r\n }\r\n return ticks;\r\n }, [formatTick, getTickCount, getTickValues, internalFormatTooltip, max, min, showTickLabels, showTicks]);\r\n\r\n const thumbMode = React.useMemo(() => {\r\n let inMode = 1;\r\n if (typeof mode === \"function\")\r\n inMode = mode();\r\n\r\n return 1 === inMode ? \"allow-crossing\" : \"inhibit-crossing\";\r\n }, [mode]);\r\n\r\n return (\r\n <div className={containerClassNames} style={style}>\r\n {showMinMax &&\r\n <MinMax value={min} testId=\"core-slider-min\" image={minImage} format={formatMin} />\r\n }\r\n <ItwinSlider\r\n className={sliderClassNames}\r\n values={values}\r\n min={min}\r\n max={max}\r\n step={step}\r\n thumbMode={thumbMode}\r\n trackDisplayMode={!reversed ? \"auto\" : \"odd-segments\"\r\n }\r\n disabled={disabled}\r\n minLabel=\"\"\r\n maxLabel=\"\"\r\n tooltipProps={tooltipProps}\r\n tickLabels={tickLabels}\r\n onChange={onChange}\r\n onUpdate={onUpdate}\r\n />\r\n {showMinMax &&\r\n <MinMax value={max} testId=\"core-slider-max\" image={maxImage} format={formatMax} />\r\n }\r\n </div>\r\n );\r\n}\r\n\r\n/** Properties for [[MinMax]] component */\r\ninterface MinMaxProps {\r\n value: number;\r\n testId: string;\r\n image?: React.ReactNode;\r\n format?: (value: number) => string;\r\n}\r\n\r\n/** MinMax component for Slider */\r\nfunction MinMax(props: MinMaxProps) {\r\n const { value, testId, image, format } = props;\r\n let element: React.ReactElement<any>;\r\n const displayValue = format !== undefined ? format(value) : value;\r\n\r\n if (image)\r\n element = <>{image}</>;\r\n else\r\n element = <BodyText className=\"core-slider-minmax\" data-testid={testId}>{displayValue}</BodyText>;\r\n\r\n return element;\r\n}\r\n"]}
|
|
1
|
+
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../../src/core-react/slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Slider\r\n */\r\n\r\nimport \"./Slider.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Slider as ItwinSlider } from \"@itwin/itwinui-react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { BodyText } from \"../text/BodyText\";\r\n\r\n// cspell:ignore pushable\r\n\r\n/** Properties for [[Slider]] component\r\n * @public\r\n */\r\nexport interface SliderProps extends CommonProps {\r\n /** Values to set Slider to initially */\r\n values: number[];\r\n /** Minimum value */\r\n min: number;\r\n /** Maximum value */\r\n max: number;\r\n /** Format the min display value */\r\n formatMin?: (value: number) => string;\r\n /** Format the max display value */\r\n formatMax?: (value: number) => string;\r\n\r\n /** Step value. Default is 0.1. */\r\n step?: number;\r\n /** The interaction mode. Default is 1. Possible values:\r\n * 1 - allows handles to cross each other.\r\n * 2 - keeps the sliders from crossing and separated by a step.\r\n */\r\n mode?: number | (() => number);\r\n /** Indicates whether the display of the Slider values is reversed. */\r\n reversed?: boolean;\r\n /** Indicates whether the Slider is disabled. */\r\n disabled?: boolean;\r\n /** Indicates whether to compensate for the tick marks when determining the width. */\r\n includeTicksInWidth?: boolean;\r\n\r\n /** Indicates whether to show tooltip with the value. The tooltip will be positioned above the Slider, by default. */\r\n showTooltip?: boolean;\r\n /** Indicates whether the tooltip should show below the Slider instead of above. */\r\n tooltipBelow?: boolean;\r\n /** Format a value for the tooltip */\r\n formatTooltip?: (value: number) => string;\r\n\r\n /** Indicates whether to show min & max values to the left & right of the Slider. */\r\n showMinMax?: boolean;\r\n /** Image to show for min. */\r\n minImage?: React.ReactNode;\r\n /** Image to show for max. */\r\n maxImage?: React.ReactNode;\r\n\r\n /** Indicates whether to show tick marks under the Slider. */\r\n showTicks?: boolean;\r\n /** Indicates whether to show tick labels under the tick marks. */\r\n showTickLabels?: boolean;\r\n /** Format a tick mark value */\r\n formatTick?: (tick: number) => string;\r\n /** Function to get the tick count. The default tick count is 10. */\r\n getTickCount?: () => number;\r\n /** Function to get the tick values. This overrides the tick count from getTickCount.\r\n * Use this prop if you want to specify your own tick values instead of ticks generated by the slider.\r\n * The numbers should be valid numbers in the domain and correspond to the step value.\r\n * Invalid values will be coerced to the closet matching value in the domain.\r\n */\r\n getTickValues?: () => number[];\r\n\r\n /** Listens for value changes.\r\n * Triggered when the value of the slider has changed. This will receive changes at\r\n * the end of a slide as well as changes from clicks on rails and tracks.\r\n */\r\n onChange?: (values: ReadonlyArray<number>) => void;\r\n /** Listens for value updates.\r\n * Called with the values at each update (caution: high-volume updates when dragging).\r\n */\r\n onUpdate?: (values: ReadonlyArray<number>) => void;\r\n /** No longer available use onUpdate. */\r\n onSlideStart?: (values: ReadonlyArray<number>) => void;\r\n /** No longer available use onChange. */\r\n onSlideEnd?: (values: ReadonlyArray<number>) => void;\r\n}\r\n\r\n/**\r\n * Slider React component displays a range slider.\r\n * @public\r\n * @deprecated Use Slider in itwinui-react instead\r\n */\r\nexport function Slider(props: SliderProps) {\r\n const { className, style, min, max, values, step, mode,\r\n formatMin, formatMax,\r\n onChange, onUpdate,\r\n showTicks, showTickLabels, formatTick, getTickCount, getTickValues, includeTicksInWidth,\r\n reversed, disabled,\r\n showMinMax, minImage, maxImage,\r\n showTooltip, tooltipBelow, formatTooltip,\r\n } = props;\r\n\r\n const containerClassNames = classnames(\r\n \"core-slider-container\",\r\n className,\r\n disabled && \"core-disabled\",\r\n showTickLabels && \"core-slider-tickLabels\",\r\n includeTicksInWidth && \"core-slider-includeTicksInWidth\",\r\n );\r\n const sliderClassNames = classnames(\r\n \"core-slider\",\r\n showMinMax && \"core-slider-minMax\",\r\n );\r\n\r\n const internalFormatTooltip = React.useCallback((value: number) => {\r\n if (formatTooltip)\r\n return formatTooltip(value);\r\n\r\n const actualStep = Math.abs(step ?? 1);\r\n\r\n if (Number.isInteger(actualStep))\r\n return value.toFixed(0);\r\n\r\n const stepString = actualStep.toString();\r\n const decimalIndex = stepString.indexOf(\".\");\r\n const numDecimals = actualStep.toString().length - (decimalIndex + 1);\r\n return value.toFixed(numDecimals);\r\n }, [formatTooltip, step]);\r\n\r\n const tooltipProps = React.useCallback((_index: number, val: number) => {\r\n const content = internalFormatTooltip(val);\r\n if (!showTooltip)\r\n return { visible: false };\r\n return { placement: tooltipBelow ? \"bottom\" : \"top\", content } as const;\r\n }, [internalFormatTooltip, showTooltip, tooltipBelow]);\r\n\r\n const tickLabels = React.useMemo(() => {\r\n let ticks: string[] | undefined;\r\n\r\n if (showTicks) {\r\n const count = getTickCount ? getTickCount() : 0;\r\n if (count) {\r\n ticks = [];\r\n const increment = (max - min) / count;\r\n for (let i = 0; i <= count; i++) {\r\n const value = (i * increment) + min;\r\n if (showTickLabels) {\r\n const label = formatTick ? formatTick(value) : internalFormatTooltip(value);\r\n ticks.push(label);\r\n } else {\r\n ticks.push(\"\");\r\n }\r\n }\r\n } else /* istanbul ignore else */ if (getTickValues) {\r\n return getTickValues().map((val: number) => formatTick ? formatTick(val) : internalFormatTooltip(val));\r\n }\r\n }\r\n return ticks;\r\n }, [formatTick, getTickCount, getTickValues, internalFormatTooltip, max, min, showTickLabels, showTicks]);\r\n\r\n const thumbMode = React.useMemo(() => {\r\n let inMode = 1;\r\n if (typeof mode === \"function\")\r\n inMode = mode();\r\n\r\n return 1 === inMode ? \"allow-crossing\" : \"inhibit-crossing\";\r\n }, [mode]);\r\n\r\n return (\r\n <div className={containerClassNames} style={style}>\r\n {showMinMax &&\r\n <MinMax value={min} testId=\"core-slider-min\" image={minImage} format={formatMin} />\r\n }\r\n <ItwinSlider\r\n className={sliderClassNames}\r\n values={values}\r\n min={min}\r\n max={max}\r\n step={step}\r\n thumbMode={thumbMode}\r\n trackDisplayMode={!reversed ? \"auto\" : \"odd-segments\"\r\n }\r\n disabled={disabled}\r\n minLabel=\"\"\r\n maxLabel=\"\"\r\n tooltipProps={tooltipProps}\r\n tickLabels={tickLabels}\r\n onChange={onChange}\r\n onUpdate={onUpdate}\r\n />\r\n {showMinMax &&\r\n <MinMax value={max} testId=\"core-slider-max\" image={maxImage} format={formatMax} />\r\n }\r\n </div>\r\n );\r\n}\r\n\r\n/** Properties for [[MinMax]] component */\r\ninterface MinMaxProps {\r\n value: number;\r\n testId: string;\r\n image?: React.ReactNode;\r\n format?: (value: number) => string;\r\n}\r\n\r\n/** MinMax component for Slider */\r\nfunction MinMax(props: MinMaxProps) {\r\n const { value, testId, image, format } = props;\r\n let element: React.ReactElement<any>;\r\n const displayValue = format !== undefined ? format(value) : value;\r\n\r\n if (image)\r\n element = <>{image}</>;\r\n else\r\n element = <BodyText className=\"core-slider-minmax\" data-testid={testId}>{displayValue}</BodyText>;\r\n\r\n return element;\r\n}\r\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itwin/core-react",
|
|
3
|
-
"version": "3.1.0-dev.
|
|
3
|
+
"version": "3.1.0-dev.23",
|
|
4
4
|
"description": "iTwin.js UI core components",
|
|
5
5
|
"main": "lib/cjs/core-react.js",
|
|
6
6
|
"module": "lib/esm/core-react.js",
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
"url": "http://www.bentley.com"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
|
-
"@itwin/appui-abstract": "^3.1.0-dev.
|
|
27
|
-
"@itwin/core-bentley": "^3.1.0-dev.
|
|
26
|
+
"@itwin/appui-abstract": "^3.1.0-dev.23",
|
|
27
|
+
"@itwin/core-bentley": "^3.1.0-dev.23",
|
|
28
28
|
"react": "^17.0.0",
|
|
29
29
|
"react-dom": "^17.0.0"
|
|
30
30
|
},
|
|
@@ -33,12 +33,12 @@
|
|
|
33
33
|
"NOTE: All tools used by scripts in this package must be listed as devDependencies"
|
|
34
34
|
],
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@itwin/appui-abstract": "3.1.0-dev.
|
|
37
|
-
"@itwin/build-tools": "3.1.0-dev.
|
|
38
|
-
"@itwin/core-bentley": "3.1.0-dev.
|
|
39
|
-
"@itwin/core-common": "3.1.0-dev.
|
|
40
|
-
"@itwin/core-i18n": "3.1.0-dev.
|
|
41
|
-
"@itwin/eslint-plugin": "3.1.0-dev.
|
|
36
|
+
"@itwin/appui-abstract": "3.1.0-dev.23",
|
|
37
|
+
"@itwin/build-tools": "3.1.0-dev.23",
|
|
38
|
+
"@itwin/core-bentley": "3.1.0-dev.23",
|
|
39
|
+
"@itwin/core-common": "3.1.0-dev.23",
|
|
40
|
+
"@itwin/core-i18n": "3.1.0-dev.23",
|
|
41
|
+
"@itwin/eslint-plugin": "3.1.0-dev.23",
|
|
42
42
|
"@testing-library/react": "^12.0.0",
|
|
43
43
|
"@testing-library/react-hooks": "^7.0.2",
|
|
44
44
|
"@testing-library/user-event": "^13.2.1",
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
"dependencies": {
|
|
92
92
|
"@bentley/icons-generic-webfont": "^1.0.15",
|
|
93
93
|
"@itwin/itwinui-css": "0.44.1",
|
|
94
|
-
"@itwin/itwinui-react": "
|
|
94
|
+
"@itwin/itwinui-react": "1.29.3",
|
|
95
95
|
"classnames": "^2.3.1",
|
|
96
96
|
"dompurify": "^2.0.12",
|
|
97
97
|
"lodash": "^4.17.10",
|