npm - @itwin/imodel-components-react - Versions diffs - 4.10.0 → 4.12.0 - Mend

@itwin/imodel-components-react 4.10.0 → 4.12.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.

Files changed (235) hide show

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSelector.js CHANGED Viewed

@@ -6,33 +6,34 @@
  * @module QuantityFormat
  */
 import * as React from "react";
-import { UiIModelComponents } from "../../UiIModelComponents";
 import { Select } from "@itwin/itwinui-react";
+import { useTranslation } from "../../useTranslation";
 /** Component use to set Quantity Format thousand group separator.
  * @internal
  */
 export function ThousandsSelector(props) {
     const { separator, ...otherProps } = props;
-    const uomDefaultEntries = React.useRef([
-        {
-            value: ",",
-            label: UiIModelComponents.translate("QuantityFormat.thousand_separator.comma"),
-        },
-        {
-            value: ".",
-            label: UiIModelComponents.translate("QuantityFormat.thousand_separator.point"),
-        },
-    ]);
+    const { translate } = useTranslation();
     const separatorOptions = React.useMemo(() => {
+        const uomDefaultEntries = [
+            {
+                value: ",",
+                label: translate("QuantityFormat.thousand_separator.comma"),
+            },
+            {
+                value: ".",
+                label: translate("QuantityFormat.thousand_separator.point"),
+            },
+        ];
         const completeListOfEntries = [];
         // istanbul ignore next (only used if format already has a character that does not match standard options)
         if (undefined ===
-            uomDefaultEntries.current.find((option) => option.value === separator)) {
+            uomDefaultEntries.find((option) => option.value === separator)) {
             completeListOfEntries.push({ value: separator, label: separator });
         }
-        completeListOfEntries.push(...uomDefaultEntries.current);
+        completeListOfEntries.push(...uomDefaultEntries);
         return completeListOfEntries;
-    }, [separator]);
+    }, [separator, translate]);
     return (React.createElement(Select, { options: separatorOptions, value: separator, size: "small", ...otherProps }));
 }
 //# sourceMappingURL=ThousandsSelector.js.map

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSelector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ThousandsSelector.js","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ThousandsSelector.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;~~AAE~~/B,OAAO,EAAE,~~kBAAkB~~,EAAE,MAAM,~~0BAA0B~~,CAAC;~~AAE9D~~,OAAO,EAAE,~~MAAM~~,EAAE,MAAM,sBAAsB,CAAC;~~AAW9C~~;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAC3C,MAAM,~~iBAAiB~~,GAAG,~~KAAK~~,CAAC,MAAM,~~CAAyB;QAC7D;YACE~~,~~KAAK,EAAE,~~GAAG~~;YACV~~,KAAK,~~EAAE~~,~~kBAAkB~~,CAAC,~~SAAS~~,~~CACjC~~,~~yCAAyC~~,~~CAC1C~~;~~SACF~~;~~QACD;YACE~~,KAAK,EAAE,GAAG;~~YACV~~,KAAK,EAAE,~~kBAAkB~~,CAAC,~~SAAS,CACjC,~~yCAAyC,~~CAC1C~~;~~SACF~~;~~KACF,CAAC,CAAC~~;~~IAEH~~,~~MAAM~~,~~gBAAgB~~,GAAG,KAAK,~~CAAC~~,~~OAAO~~,CAAC,~~GAAG~~,~~EAAE~~;~~QAC1C~~,MAAM,qBAAqB,GAA2B,EAAE,CAAC;QACzD,0GAA0G;QAC1G,IACE,SAAS;YACT,iBAAiB,CAAC,~~OAAO,CAAC,~~IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC,~~EACtE~~;YACA,qBAAqB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;SACpE;QACD,qBAAqB,CAAC,IAAI,CAAC,GAAG,iBAAiB,CAAC,~~OAAO,~~CAAC~~,CAAC~~;~~QACzD~~,OAAO,qBAAqB,CAAC;IAC/B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;~~IAEhB~~,OAAO,CACL,oBAAC,MAAM,IACL,OAAO,EAAE,gBAAgB,EACzB,KAAK,EAAE,SAAS,EAChB,IAAI,EAAC,OAAO,KACR,UAAU,GACd,CACH,CAAC;AACJ,CAAC","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module QuantityFormat\n /\n\nimport as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { ~~UiIModelComponents~~ } from \"~~../../UiIModelComponents~~\";\nimport ~~type~~ { ~~SelectOption~~ } from \"@itwin/itwinui-react\";\nimport { ~~Select~~ } from \"~~@itwin/itwinui-react~~\";\n\n/** Properties of [[ThousandsSelector]] component.\n * @internal\n /\nexport interface ThousandsSelectorProps extends CommonProps {\n separator: string;\n disabled: boolean;\n onChange: (value: string) => void;\n}\n\n/* Component use to set Quantity Format thousand group separator.\n * @internal\n */\nexport function ThousandsSelector(props: ThousandsSelectorProps) {\n const { separator, ...otherProps } = props;\n const ~~uomDefaultEntries~~ = React.~~useRef<~~SelectOption<string>[]>([\n {\n value: \",\",\n label: ~~UiIModelComponents.~~translate(\~~n \~~"QuantityFormat.thousand_separator.comma\"\n ),\n },\n {\n value: \".\",\n label: ~~UiIModelComponents.~~translate(\~~n \~~"QuantityFormat.thousand_separator.point\"\n ),\n },\n ]);\n~~\n const separatorOptions = React.useMemo(() => {\n~~ const completeListOfEntries: SelectOption<string>[] = [];\n // istanbul ignore next (only used if format already has a character that does not match standard options)\n if (\n undefined ===\n uomDefaultEntries.~~current.~~find((option) => option.value === separator)\n ) {\n completeListOfEntries.push({ value: separator, label: separator });\n }\n completeListOfEntries.push(...uomDefaultEntries~~.current~~);\n return completeListOfEntries;\n }, [separator]);\n\n return (\n <Select\n options={separatorOptions}\n value={separator}\n size=\"small\"\n {...otherProps}\n />\n );\n}\n"]}
1	+ {"version":3,"file":"ThousandsSelector.js","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ThousandsSelector.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAWtD;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAC3C,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IAEvC,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,MAAM,iBAAiB,GAA2B;YAChD;gBACE,KAAK,EAAE,GAAG;gBACV,KAAK,EAAE,SAAS,CAAC,yCAAyC,CAAC;aAC5D;YACD;gBACE,KAAK,EAAE,GAAG;gBACV,KAAK,EAAE,SAAS,CAAC,yCAAyC,CAAC;aAC5D;SACF,CAAC;QACF,MAAM,qBAAqB,GAA2B,EAAE,CAAC;QACzD,0GAA0G;QAC1G,IACE,SAAS;YACT,iBAAiB,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC,EAC9D;YACA,qBAAqB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;SACpE;QACD,qBAAqB,CAAC,IAAI,CAAC,GAAG,iBAAiB,CAAC,CAAC;QACjD,OAAO,qBAAqB,CAAC;IAC/B,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;IAE3B,OAAO,CACL,oBAAC,MAAM,IACL,OAAO,EAAE,gBAAgB,EACzB,KAAK,EAAE,SAAS,EAChB,IAAI,EAAC,OAAO,KACR,UAAU,GACd,CACH,CAAC;AACJ,CAAC","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module QuantityFormat\n /\n\nimport as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport type { SelectOption } from \"@itwin/itwinui-react\";\nimport { Select } from \"@itwin/itwinui-react\";\nimport { useTranslation } from \"../../useTranslation\";\n\n/** Properties of [[ThousandsSelector]] component.\n * @internal\n /\nexport interface ThousandsSelectorProps extends CommonProps {\n separator: string;\n disabled: boolean;\n onChange: (value: string) => void;\n}\n\n/* Component use to set Quantity Format thousand group separator.\n * @internal\n */\nexport function ThousandsSelector(props: ThousandsSelectorProps) {\n const { separator, ...otherProps } = props;\n const { translate } = useTranslation();\n\n const separatorOptions = React.useMemo(() => {\n const uomDefaultEntries: SelectOption<string>[] = [\n {\n value: \",\",\n label: translate(\"QuantityFormat.thousand_separator.comma\"),\n },\n {\n value: \".\",\n label: translate(\"QuantityFormat.thousand_separator.point\"),\n },\n ];\n const completeListOfEntries: SelectOption<string>[] = [];\n // istanbul ignore next (only used if format already has a character that does not match standard options)\n if (\n undefined ===\n uomDefaultEntries.find((option) => option.value === separator)\n ) {\n completeListOfEntries.push({ value: separator, label: separator });\n }\n completeListOfEntries.push(...uomDefaultEntries);\n return completeListOfEntries;\n }, [separator, translate]);\n\n return (\n <Select\n options={separatorOptions}\n value={separator}\n size=\"small\"\n {...otherProps}\n />\n );\n}\n"]}

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSeparator.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ThousandsSeparator.d.ts","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ThousandsSeparator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAMxD;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,WAAW;IAC1D,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,~~qBAgHhE~~"}
1	+ {"version":3,"file":"ThousandsSeparator.d.ts","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ThousandsSeparator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAMxD;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,WAAW;IAC1D,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAwGhE"}

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSeparator.js CHANGED Viewed

@@ -10,12 +10,14 @@ import * as React from "react";
 import { Format, FormatTraits, getTraitString } from "@itwin/core-quantity";
 import { Checkbox } from "@itwin/itwinui-react";
 import { ThousandsSelector } from "./ThousandsSelector";
-import { UiIModelComponents } from "../../UiIModelComponents";
+import { useTranslation } from "../../useTranslation";
 /** Component use to set Quantity Format thousand group separator.
  * @internal
  */
 export function ThousandsSeparator(props) {
+    var _a;
     const { formatProps, onChange } = props;
+    const { translate } = useTranslation();
     const handleSetFormatProps = React.useCallback((newProps) => {
         onChange && onChange(newProps);
     }, [onChange]);
@@ -69,12 +71,10 @@ export function ThousandsSeparator(props) {
         };
         handleSetFormatProps(newFormatProps);
     }, [formatProps, isFormatTraitSet, handleSetFormatProps]);
-    const useThousandSeparatorLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.useThousandSeparatorLabel"));
-    const thousandSeparatorLabel = React.useRef(UiIModelComponents.translate("QuantityFormat.labels.thousandSeparatorLabel"));
     return (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: "uicore-label" }, useThousandSeparatorLabel.current),
+        React.createElement("span", { className: "uicore-label" }, translate("QuantityFormat.labels.useThousandSeparatorLabel")),
         React.createElement(Checkbox, { "data-testid": "use-thousands-separator", checked: isFormatTraitSet(FormatTraits.Use1000Separator), onChange: handleUseThousandsSeparatorChange }),
-        React.createElement("span", { className: classnames("uicore-label", !isFormatTraitSet(FormatTraits.Use1000Separator) && "uicore-disabled") }, thousandSeparatorLabel.current),
-        React.createElement(ThousandsSelector, { "data-testid": "thousands-separator-selector", separator: formatProps.thousandSeparator ?? ",", disabled: !isFormatTraitSet(FormatTraits.Use1000Separator), onChange: handleThousandSeparatorChange })));
+        React.createElement("span", { className: classnames("uicore-label", !isFormatTraitSet(FormatTraits.Use1000Separator) && "uicore-disabled") }, translate("QuantityFormat.labels.thousandSeparatorLabel")),
+        React.createElement(ThousandsSelector, { "data-testid": "thousands-separator-selector", separator: (_a = formatProps.thousandSeparator) !== null && _a !== void 0 ? _a : ",", disabled: !isFormatTraitSet(FormatTraits.Use1000Separator), onChange: handleThousandSeparatorChange })));
 }
 //# sourceMappingURL=ThousandsSeparator.js.map

package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSeparator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ThousandsSeparator.js","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ThousandsSeparator.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,~~kBAAkB~~,EAAE,MAAM,~~0BAA0B~~,CAAC;~~AAU9D~~;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAA8B;IAC/D,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;~~IAExC~~,MAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAC5C,CAAC,QAAqB,EAAE,EAAE;QACxB,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CAAC,KAAmB,EAAE,SAAkB,EAAE,EAAE;QAC1C,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,YAAY,GAAa,CAAC,QAAQ,CAAC,CAAC;QACxC,IAAI,SAAS,EAAE;YACb,gBAAgB;YAChB,uBAAuB;YACvB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC5B,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC;oBACpD,CAAC,CAAC,WAAW,CAAC,YAAY;oBAC1B,CAAC,CAAC,0BAA0B,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,CACvD,QAAQ,CACT,CAAC;gBACN,YAAY,GAAG,CAAC,GAAG,MAAM,EAAE,QAAQ,CAAC,CAAC;aACtC;SACF;aAAM;YACL,iBAAiB;YACjB,uBAAuB;YACvB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC5B,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC;oBACpD,CAAC,CAAC,WAAW,CAAC,YAAY;oBAC1B,CAAC,CAAC,0BAA0B,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,CACvD,QAAQ,CACT,CAAC;gBACN,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC;aACvE;SACF;QACD,MAAM,cAAc,GAAG,EAAE,GAAG,WAAW,EAAE,YAAY,EAAE,CAAC;QACxD,oBAAoB,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC,EACD,CAAC,WAAW,EAAE,oBAAoB,CAAC,CACpC,CAAC;IAEF,MAAM,iCAAiC,GAAG,KAAK,CAAC,WAAW,CACzD,CAAC,CAAsC,EAAE,EAAE;QACzC,cAAc,CAAC,YAAY,CAAC,gBAAgB,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAClE,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CACxC,CAAC,KAAmB,EAAE,EAAE;QACtB,OAAO,MAAM,CAAC,uBAAuB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAC5D,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,MAAM,6BAA6B,GAAG,KAAK,CAAC,WAAW,CACrD,CAAC,iBAAyB,EAAE,EAAE;QAC5B,IAAI,gBAAgB,GAAG,WAAW,CAAC,gBAAgB,CAAC;QACpD,oDAAoD;QACpD,uBAAuB;QACvB,IAAI,gBAAgB,CAAC,YAAY,CAAC,gBAAgB,CAAC,EAAE;YACnD,IAAI,iBAAiB,KAAK,GAAG;gBAAE,gBAAgB,GAAG,GAAG,CAAC;YACtD,4BAA4B;;gBACvB,gBAAgB,GAAG,GAAG,CAAC;SAC7B;QACD,MAAM,cAAc,GAAG;YACrB,GAAG,WAAW;YACd,iBAAiB;YACjB,gBAAgB;SACjB,CAAC;QACF,oBAAoB,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC,EACD,CAAC,WAAW,EAAE,gBAAgB,EAAE,oBAAoB,CAAC,CACtD,CAAC;IAEF,~~MAAM,yBAAyB,GAAG,KAAK,CAAC,MAAM,CAC5C,kBAAkB,CAAC,SAAS,CAC1B,iDAAiD,CAClD,CACF,CAAC;IACF,MAAM,sBAAsB,GAAG,KAAK,CAAC,MAAM,CACzC,kBAAkB,CAAC,SAAS,CAAC,8CAA8C,CAAC,CAC7E,CAAC;IAEF,~~OAAO,CACL;QACE,8BAAM,SAAS,EAAE,cAAc,IAC5B,~~yBAAyB~~,CAAC,~~OAAO~~,~~CAC7B~~;QACP,oBAAC,QAAQ,mBACK,yBAAyB,EACrC,OAAO,EAAE,gBAAgB,CAAC,YAAY,CAAC,gBAAgB,CAAC,EACxD,QAAQ,EAAE,iCAAiC,GAC3C;QACF,8BACE,SAAS,EAAE,UAAU,CACnB,cAAc,EACd,CAAC,gBAAgB,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,iBAAiB,CACtE,IAEA,~~sBAAsB~~,CAAC,~~OAAO~~,~~CAC1B~~;QACP,oBAAC,iBAAiB,mBACJ,8BAA8B,EAC1C,SAAS,EAAE,WAAW,CAAC,iBAAiB,~~IAAI~~,GAAG,EAC/C,QAAQ,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,gBAAgB,CAAC,EAC1D,QAAQ,EAAE,6BAA6B,GACvC,CACD,CACJ,CAAC;AACJ,CAAC","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module QuantityFormat\n /\n\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport type { FormatProps } from \"@itwin/core-quantity\";\nimport { Format, FormatTraits, getTraitString } from \"@itwin/core-quantity\";\nimport { Checkbox } from \"@itwin/itwinui-react\";\nimport { ThousandsSelector } from \"./ThousandsSelector\";\nimport { ~~UiIModelComponents~~ } from \"../../~~UiIModelComponents~~\";\n\n/** Properties of [[ThousandsSeparator]] component.\n * @internal\n /\nexport interface ThousandsSeparatorProps extends CommonProps {\n formatProps: FormatProps;\n onChange?: (format: FormatProps) => void;\n}\n\n/* Component use to set Quantity Format thousand group separator.\n * @internal\n /\nexport function ThousandsSeparator(props: ThousandsSeparatorProps) {\n const { formatProps, onChange } = props;\n\n const handleSetFormatProps = React.useCallback(\n (newProps: FormatProps) => {\n onChange && onChange(newProps);\n },\n [onChange]\n );\n\n const setFormatTrait = React.useCallback(\n (trait: FormatTraits, setActive: boolean) => {\n const traitStr = getTraitString(trait);\n let formatTraits: string[] = [traitStr];\n if (setActive) {\n // setting trait\n // istanbul ignore else\n if (formatProps.formatTraits) {\n const traits = Array.isArray(formatProps.formatTraits)\n ? formatProps.formatTraits\n : / istanbul ignore next / formatProps.formatTraits.split(\n /,\|;\|\\\|/\n );\n formatTraits = [...traits, traitStr];\n }\n } else {\n // clearing trait\n // istanbul ignore else\n if (formatProps.formatTraits) {\n const traits = Array.isArray(formatProps.formatTraits)\n ? formatProps.formatTraits\n : / istanbul ignore next */ formatProps.formatTraits.split(\n /,\|;\|\\\|/\n );\n formatTraits = traits.filter((traitEntry) => traitEntry !== traitStr);\n }\n }\n const newFormatProps = { ...formatProps, formatTraits };\n handleSetFormatProps(newFormatProps);\n },\n [formatProps, handleSetFormatProps]\n );\n\n const handleUseThousandsSeparatorChange = React.useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n setFormatTrait(FormatTraits.Use1000Separator, e.target.checked);\n },\n [setFormatTrait]\n );\n\n const isFormatTraitSet = React.useCallback(\n (trait: FormatTraits) => {\n return Format.isFormatTraitSetInProps(formatProps, trait);\n },\n [formatProps]\n );\n\n const handleThousandSeparatorChange = React.useCallback(\n (thousandSeparator: string) => {\n let decimalSeparator = formatProps.decimalSeparator;\n // make sure 1000 and decimal separator do not match\n // istanbul ignore else\n if (isFormatTraitSet(FormatTraits.Use1000Separator)) {\n if (thousandSeparator === \".\") decimalSeparator = \",\";\n // thousandSeparator === \",\"\n else decimalSeparator = \".\";\n }\n const newFormatProps = {\n ...formatProps,\n thousandSeparator,\n decimalSeparator,\n };\n handleSetFormatProps(newFormatProps);\n },\n [formatProps, isFormatTraitSet, handleSetFormatProps]\n );\n\n const useThousandSeparatorLabel = React.useRef(\n UiIModelComponents.translate(\n \"QuantityFormat.labels.useThousandSeparatorLabel\"\n )\n );\n const thousandSeparatorLabel = React.useRef(\n UiIModelComponents.translate(\"QuantityFormat.labels.thousandSeparatorLabel\")\n );\n\n return (\n <>\n <span className={\"uicore-label\"}>\n {useThousandSeparatorLabel~~.current~~}\n </span>\n <Checkbox\n data-testid=\"use-thousands-separator\"\n checked={isFormatTraitSet(FormatTraits.Use1000Separator)}\n onChange={handleUseThousandsSeparatorChange}\n />\n <span\n className={classnames(\n \"uicore-label\",\n !isFormatTraitSet(FormatTraits.Use1000Separator) && \"uicore-disabled\"\n )}\n >\n {thousandSeparatorLabel~~.current~~}\n </span>\n <ThousandsSelector\n data-testid=\"thousands-separator-selector\"\n separator={formatProps.thousandSeparator ?? \",\"}\n disabled={!isFormatTraitSet(FormatTraits.Use1000Separator)}\n onChange={handleThousandSeparatorChange}\n />\n </>\n );\n}\n"]}
1	+ {"version":3,"file":"ThousandsSeparator.js","sourceRoot":"","sources":["../../../../../src/imodel-components-react/quantityformat/misc/ThousandsSeparator.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAUtD;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAA8B;;IAC/D,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACxC,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IAEvC,MAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAC5C,CAAC,QAAqB,EAAE,EAAE;QACxB,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CAAC,KAAmB,EAAE,SAAkB,EAAE,EAAE;QAC1C,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,YAAY,GAAa,CAAC,QAAQ,CAAC,CAAC;QACxC,IAAI,SAAS,EAAE;YACb,gBAAgB;YAChB,uBAAuB;YACvB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC5B,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC;oBACpD,CAAC,CAAC,WAAW,CAAC,YAAY;oBAC1B,CAAC,CAAC,0BAA0B,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,CACvD,QAAQ,CACT,CAAC;gBACN,YAAY,GAAG,CAAC,GAAG,MAAM,EAAE,QAAQ,CAAC,CAAC;aACtC;SACF;aAAM;YACL,iBAAiB;YACjB,uBAAuB;YACvB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC5B,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC;oBACpD,CAAC,CAAC,WAAW,CAAC,YAAY;oBAC1B,CAAC,CAAC,0BAA0B,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,CACvD,QAAQ,CACT,CAAC;gBACN,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC;aACvE;SACF;QACD,MAAM,cAAc,GAAG,EAAE,GAAG,WAAW,EAAE,YAAY,EAAE,CAAC;QACxD,oBAAoB,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC,EACD,CAAC,WAAW,EAAE,oBAAoB,CAAC,CACpC,CAAC;IAEF,MAAM,iCAAiC,GAAG,KAAK,CAAC,WAAW,CACzD,CAAC,CAAsC,EAAE,EAAE;QACzC,cAAc,CAAC,YAAY,CAAC,gBAAgB,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAClE,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CACxC,CAAC,KAAmB,EAAE,EAAE;QACtB,OAAO,MAAM,CAAC,uBAAuB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAC5D,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,MAAM,6BAA6B,GAAG,KAAK,CAAC,WAAW,CACrD,CAAC,iBAAyB,EAAE,EAAE;QAC5B,IAAI,gBAAgB,GAAG,WAAW,CAAC,gBAAgB,CAAC;QACpD,oDAAoD;QACpD,uBAAuB;QACvB,IAAI,gBAAgB,CAAC,YAAY,CAAC,gBAAgB,CAAC,EAAE;YACnD,IAAI,iBAAiB,KAAK,GAAG;gBAAE,gBAAgB,GAAG,GAAG,CAAC;YACtD,4BAA4B;;gBACvB,gBAAgB,GAAG,GAAG,CAAC;SAC7B;QACD,MAAM,cAAc,GAAG;YACrB,GAAG,WAAW;YACd,iBAAiB;YACjB,gBAAgB;SACjB,CAAC;QACF,oBAAoB,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC,EACD,CAAC,WAAW,EAAE,gBAAgB,EAAE,oBAAoB,CAAC,CACtD,CAAC;IAEF,OAAO,CACL;QACE,8BAAM,SAAS,EAAE,cAAc,IAC5B,SAAS,CAAC,iDAAiD,CAAC,CACxD;QACP,oBAAC,QAAQ,mBACK,yBAAyB,EACrC,OAAO,EAAE,gBAAgB,CAAC,YAAY,CAAC,gBAAgB,CAAC,EACxD,QAAQ,EAAE,iCAAiC,GAC3C;QACF,8BACE,SAAS,EAAE,UAAU,CACnB,cAAc,EACd,CAAC,gBAAgB,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,iBAAiB,CACtE,IAEA,SAAS,CAAC,8CAA8C,CAAC,CACrD;QACP,oBAAC,iBAAiB,mBACJ,8BAA8B,EAC1C,SAAS,EAAE,MAAA,WAAW,CAAC,iBAAiB,mCAAI,GAAG,EAC/C,QAAQ,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,gBAAgB,CAAC,EAC1D,QAAQ,EAAE,6BAA6B,GACvC,CACD,CACJ,CAAC;AACJ,CAAC","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module QuantityFormat\n /\n\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport type { FormatProps } from \"@itwin/core-quantity\";\nimport { Format, FormatTraits, getTraitString } from \"@itwin/core-quantity\";\nimport { Checkbox } from \"@itwin/itwinui-react\";\nimport { ThousandsSelector } from \"./ThousandsSelector\";\nimport { useTranslation } from \"../../useTranslation\";\n\n/** Properties of [[ThousandsSeparator]] component.\n * @internal\n /\nexport interface ThousandsSeparatorProps extends CommonProps {\n formatProps: FormatProps;\n onChange?: (format: FormatProps) => void;\n}\n\n/* Component use to set Quantity Format thousand group separator.\n * @internal\n /\nexport function ThousandsSeparator(props: ThousandsSeparatorProps) {\n const { formatProps, onChange } = props;\n const { translate } = useTranslation();\n\n const handleSetFormatProps = React.useCallback(\n (newProps: FormatProps) => {\n onChange && onChange(newProps);\n },\n [onChange]\n );\n\n const setFormatTrait = React.useCallback(\n (trait: FormatTraits, setActive: boolean) => {\n const traitStr = getTraitString(trait);\n let formatTraits: string[] = [traitStr];\n if (setActive) {\n // setting trait\n // istanbul ignore else\n if (formatProps.formatTraits) {\n const traits = Array.isArray(formatProps.formatTraits)\n ? formatProps.formatTraits\n : / istanbul ignore next / formatProps.formatTraits.split(\n /,\|;\|\\\|/\n );\n formatTraits = [...traits, traitStr];\n }\n } else {\n // clearing trait\n // istanbul ignore else\n if (formatProps.formatTraits) {\n const traits = Array.isArray(formatProps.formatTraits)\n ? formatProps.formatTraits\n : / istanbul ignore next */ formatProps.formatTraits.split(\n /,\|;\|\\\|/\n );\n formatTraits = traits.filter((traitEntry) => traitEntry !== traitStr);\n }\n }\n const newFormatProps = { ...formatProps, formatTraits };\n handleSetFormatProps(newFormatProps);\n },\n [formatProps, handleSetFormatProps]\n );\n\n const handleUseThousandsSeparatorChange = React.useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n setFormatTrait(FormatTraits.Use1000Separator, e.target.checked);\n },\n [setFormatTrait]\n );\n\n const isFormatTraitSet = React.useCallback(\n (trait: FormatTraits) => {\n return Format.isFormatTraitSetInProps(formatProps, trait);\n },\n [formatProps]\n );\n\n const handleThousandSeparatorChange = React.useCallback(\n (thousandSeparator: string) => {\n let decimalSeparator = formatProps.decimalSeparator;\n // make sure 1000 and decimal separator do not match\n // istanbul ignore else\n if (isFormatTraitSet(FormatTraits.Use1000Separator)) {\n if (thousandSeparator === \".\") decimalSeparator = \",\";\n // thousandSeparator === \",\"\n else decimalSeparator = \".\";\n }\n const newFormatProps = {\n ...formatProps,\n thousandSeparator,\n decimalSeparator,\n };\n handleSetFormatProps(newFormatProps);\n },\n [formatProps, isFormatTraitSet, handleSetFormatProps]\n );\n\n return (\n <>\n <span className={\"uicore-label\"}>\n {translate(\"QuantityFormat.labels.useThousandSeparatorLabel\")}\n </span>\n <Checkbox\n data-testid=\"use-thousands-separator\"\n checked={isFormatTraitSet(FormatTraits.Use1000Separator)}\n onChange={handleUseThousandsSeparatorChange}\n />\n <span\n className={classnames(\n \"uicore-label\",\n !isFormatTraitSet(FormatTraits.Use1000Separator) && \"uicore-disabled\"\n )}\n >\n {translate(\"QuantityFormat.labels.thousandSeparatorLabel\")}\n </span>\n <ThousandsSelector\n data-testid=\"thousands-separator-selector\"\n separator={formatProps.thousandSeparator ?? \",\"}\n disabled={!isFormatTraitSet(FormatTraits.Use1000Separator)}\n onChange={handleThousandSeparatorChange}\n />\n </>\n );\n}\n"]}

package/lib/esm/imodel-components-react/timeline/PlayButton.d.ts CHANGED Viewed

@@ -1,24 +1,12 @@
-import "./PlayButton.scss";
 import * as React from "react";
-import type { CommonProps } from "@itwin/core-react";
-interface PlayButtonProps extends CommonProps {
+interface PlayButtonProps {
     isPlaying: boolean;
     onPlay?: () => void;
     onPause?: () => void;
-    tooltip?: string;
 }
-interface PlayButtonState {
-    isPlaying: boolean;
-}
-/** Play/Pause button used on timeline control
+/** Play/pause button used in timeline components.
  * @internal
  */
-export declare class PlayButton extends React.Component<PlayButtonProps, PlayButtonState> {
-    constructor(props: PlayButtonProps, context?: any);
-    /** @internal */
-    componentDidUpdate(): void;
-    private _onClick;
-    render(): React.JSX.Element;
-}
+export declare function PlayButton({ isPlaying, onPlay, onPause }: PlayButtonProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=PlayButton.d.ts.map

package/lib/esm/imodel-components-react/timeline/PlayButton.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlayButton.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/PlayButton.tsx"],"names":[],"mappings":"AAIA,OAAO,~~mBAAmB,CAAC;AAE3B,OAAO,~~KAAK,KAAK,MAAM,OAAO,CAAC;~~AAC~~/B,~~OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKrD,~~UAAU,~~eAAgB,SAAQ,WAAW~~;~~IAC3C~~,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;~~IACrB,OAAO,CAAC,EAAE,MAAM,CAAC~~;~~CAClB;~~AAED~~,UAAU,eAAe;IACvB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED~~;;GAEG;AACH,~~qBAAa~~,~~UAAW~~,~~SAAQ~~,~~KAAK~~,~~CAAC,~~SAAS,~~CAC7C,eAAe,EACf,eAAe,CAChB;gBACa,KAAK,~~EAAE,~~eAAe~~,EAAE,OAAO,~~CAAC~~,EAAE,~~GAAG;IAMjD~~,~~gBAAgB;IACA,kBAAkB;IAMlC,OAAO,CAAC,QAAQ,CAYd;IAEc,MAAM;CA6BvB~~"}
1	+ {"version":3,"file":"PlayButton.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/PlayButton.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,eAAe;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,eAAe,qBAoBzE"}

package/lib/esm/imodel-components-react/timeline/PlayButton.js CHANGED Viewed

@@ -2,49 +2,22 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import "./PlayButton.scss";
-import classnames from "classnames";
 import * as React from "react";
-import { Icon } from "@itwin/core-react";
 import { SvgPause, SvgPlay } from "@itwin/itwinui-icons-react";
-import { UiIModelComponents } from "../UiIModelComponents";
-/** Play/Pause button used on timeline control
+import { IconButton } from "@itwin/itwinui-react";
+import { useTranslation } from "../useTranslation";
+/** Play/pause button used in timeline components.
  * @internal
  */
-export class PlayButton extends React.Component {
-    constructor(props, context) {
-        super(props, context);
-        this._onClick = () => {
-            const _isPlaying = !this.state.isPlaying;
-            this.setState({ isPlaying: _isPlaying });
-            if (_isPlaying) {
-                // istanbul ignore else
-                if (this.props.onPlay)
-                    this.props.onPlay();
+export function PlayButton({ isPlaying, onPlay, onPause }) {
+    const { translate } = useTranslation();
+    const label = translate(isPlaying ? "timeline.pause" : "timeline.play");
+    return (React.createElement(IconButton, { styleType: "borderless", label: label, onClick: () => {
+            if (isPlaying) {
+                onPause === null || onPause === void 0 ? void 0 : onPause();
+                return;
             }
-            else {
-                // istanbul ignore else
-                if (this.props.onPause)
-                    this.props.onPause();
-            }
-        };
-        this.state = { isPlaying: this.props.isPlaying };
-    }
-    /** @internal */
-    componentDidUpdate() {
-        if (this.props.isPlaying !== this.state.isPlaying) {
-            this.setState((_, props) => ({ isPlaying: props.isPlaying }));
-        }
-    }
-    render() {
-        const { tooltip } = this.props;
-        const iconSpec = this.state.isPlaying ? React.createElement(SvgPause, null) : React.createElement(SvgPlay, null);
-        let title = tooltip;
-        if (!title)
-            title = UiIModelComponents.translate(this.state.isPlaying ? "timeline.pause" : "timeline.play");
-        return (React.createElement("button", { "data-testid": this.props.className, title: title, className: classnames("play-button", this.props.className), onClick: this._onClick },
-            React.createElement("span", { className: "icon", "data-testid": this.state.isPlaying ? "pause" : "play" },
-                React.createElement(Icon, { iconSpec: iconSpec, "data-testid": this.state.isPlaying ? "pause" : "play" }))));
-    }
+            onPlay === null || onPlay === void 0 ? void 0 : onPlay();
+        } }, isPlaying ? React.createElement(SvgPause, null) : React.createElement(SvgPlay, null)));
 }
 //# sourceMappingURL=PlayButton.js.map

package/lib/esm/imodel-components-react/timeline/PlayButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlayButton.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/PlayButton.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG,OAAO,~~mBAAmB,CAAC;AAC3B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,~~KAAK,KAAK,MAAM,OAAO,CAAC;~~AAE~~/B,OAAO,EAAE,~~IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,~~QAAQ,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,~~kBAAkB~~,EAAE,MAAM,~~uBAAuB~~,CAAC;~~AAa3D;;GAEG;AACH~~,~~MAAM,~~OAAO,~~UAAW,SAAQ,KAAK,CAAC,SAGrC;IACC,YAAY,KAAsB,~~EAAE,~~OAAa;QAC/C~~,~~KAAK,CAAC,KAAK,~~EAAE,~~OAAO~~,~~CAAC~~,CAAC;~~QAYhB,aAAQ,GAAG,GAAG,EAAE~~;~~YACtB~~,MAAM,UAAU,~~GAAG~~,CAAC,~~IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;YAEzC,IAAI,CAAC,QAAQ,CAAC,~~EAAE,SAAS,EAAE,~~UAAU,EAAE,CAAC,CAAC;YAEzC,IAAI,UAAU,EAAE;gBACd,uBAAuB;gBACvB,IAAI,IAAI,CAAC,KAAK,CAAC,~~MAAM~~;oBAAE~~,~~IAAI,CAAC,KAAK,CAAC,MAAM,~~EAAE,~~CAAC;aAC5C;iBAAM;gBACL,uBAAuB;gBACvB,IAAI,IAAI,CAAC,KAAK,CAAC,~~OAAO~~;oBAAE~~,~~IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC~~;~~aAC9C;QACH~~,~~CAAC~~,~~CAAC;QAtBA,IAAI,CAAC,KAAK,GAAG,~~EAAE,SAAS,EAAE,~~IAAI~~,~~CAAC~~,~~KAAK,CAAC,SAAS,~~EAAE,CAAC;~~IACnD~~,CAAC;IAED,gBAAgB;IACA,kBAAkB;QAChC,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;YACjD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;SAC/D;IACH,CAAC;IAgBe,MAAM~~;QACpB~~,~~MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,~~KAAK,~~CAAC;QAC/B,MAAM,QAAQ,~~GAAG,~~IAAI,CAAC,KAAK,CAAC,~~SAAS,CAAC,~~CAAC,CAAC,oBAAC,QAAQ,OAAG,CAAC,CAAC,CAAC,oBAAC,OAAO,OAAG,CAAC;QACnE,IAAI,KAAK,GAAG,OAAO,CAAC;QAEpB,IAAI,CAAC,KAAK;YACR,KAAK,GAAG,kBAAkB,CAAC,~~SAAS,~~CAClC,IAAI,~~CAAC,~~KAAK,~~CAAC,~~SAAS,~~CAAC,~~CAAC,CAAC,~~gBAAgB,CAAC,CAAC,CAAC,eAAe,~~CAC1D~~,CAAC;~~QAEJ~~,OAAO,CACL~~,+CACe~~,~~IAAI~~,~~CAAC~~,~~KAAK~~,~~CAAC,~~SAAS,~~EACjC~~,KAAK,EAAE,KAAK,EACZ,~~SAAS~~,EAAE,~~UAAU~~,~~CAAC,aAAa,~~EAAE,IAAI,~~CAAC~~,~~KAAK~~,~~CAAC~~,~~SAAS~~,~~CAAC~~,~~EAC1D~~,OAAO,~~EAAE~~,~~IAAI,~~CAAC,~~QAAQ~~;~~YAEtB~~,~~8BACE~~,~~SAAS~~,~~EAAC,~~MAAM,~~iBACH~~,~~IAAI~~,~~CAAC~~,~~KAAK,~~CAAC,~~SAAS,~~CAAC,~~CAAC~~,~~CAAC~~,~~OAAO,~~CAAC,CAAC,CAAC,~~MAAM;gBAEpD,~~oBAAC,~~IAAI,IACH,~~QAAQ,~~EAAE~~,~~QAAQ,iBACL,IAAI,~~CAAC,~~KAAK,~~CAAC,~~SAAS,~~CAAC,~~CAAC~~,~~CAAC,~~OAAO,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~MAAM,GACpD,CACG,CACA,CACV,~~CAAC;~~IACJ~~,CAAC~~;CACF~~","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\nimport ~~\"./PlayButton.scss\";\nimport classnames from \"classnames\";\nimport~~ * as React from \"react\";\nimport ~~type~~ { ~~CommonProps~~ } ~~from \"@itwin/core-react\";\nimport { Icon~~ } from \"@itwin/~~core~~-react\";\nimport { ~~SvgPause,~~ ~~SvgPlay~~ } from \"@itwin/itwinui-~~icons-~~react\";\nimport { ~~UiIModelComponents~~ } from \"../~~UiIModelComponents~~\";\n\ninterface PlayButtonProps ~~extends CommonProps~~ {\n isPlaying: boolean;\n onPlay?: () => void;\n onPause?: () => void;\n ~~tooltip?: string;\n~~}\n\~~ninterface PlayButtonState {\~~n ~~isPlaying: boolean;\n}\n\n~~/** Play/~~Pause~~ button used on timeline ~~control\~~n * @internal\n /\nexport ~~class~~ PlayButton ~~extends React.Component<\n PlayButtonProps,\n PlayButtonState\n>~~ {~~\n constructor(props:~~ ~~PlayButtonProps~~, ~~context?: any) {\n super(props~~, ~~context);\n\n this.state~~ ~~= { isPlaying~~: ~~this.props.isPlaying };\n }\n\n /* @internal */\n public override componentDidUpdate(~~) {\n ~~if (this.props.isPlaying !== this.state.isPlaying) {\n this.setState((_, props) => ({ isPlaying: props.isPlaying }));\n }\n~~ ~~}\n\n private _onClick = () => {\n~~ const ~~_isPlaying = !this.state.isPlaying;\n\n this.setState(~~{ ~~isPlaying:~~ ~~_isPlaying~~ }~~);\n\n if~~ ~~(_isPlaying)~~ ~~{\n // istanbul ignore else\n if~~ (~~this.props.onPlay~~) ~~this.props.onPlay()~~;\n ~~} else {\n // istanbul ignore else\n if (this.props.onPause) this.props.onPause();\n }\n~~ ~~};\n\n public override render() {\n~~ const { ~~tooltip }~~ = ~~this.props;\n const iconSpec = this.state.isPlaying ? <SvgPause /> : <SvgPlay />;\n let title = tooltip;\n\n if (!title)\n title = UiIModelComponents.~~translate(~~\n this.state.~~isPlaying ? \"timeline.pause\" : \"timeline.play\"\n );\n\n return (\n <~~button~~\n ~~data-testid={this.props.className}~~\n ~~title~~={~~title~~}\n ~~className~~={~~classnames~~(~~\"play-button\",~~ ~~this.props.className)}~~\n ~~onClick=~~{~~this._onClick}~~\n >\n ~~<span~~\n ~~className=\"icon~~\"\n ~~data-testid={this.state.isPlaying ? \"pause\" : \"play\"~~}\n >\n ~~<Icon\n iconSpec=~~{~~iconSpec}\n data-testid={this.state.~~isPlaying ? ~~\"pause\"~~ : ~~\"play\"~~}\n ~~/>\n~~ </~~span~~>\n ~~</button>\n~~ );\n }\n~~}\n~~"]}
1	+ {"version":3,"file":"PlayButton.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/PlayButton.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAQnD;;GAEG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAmB;IACxE,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IACvC,MAAM,KAAK,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;IAExE,OAAO,CACL,oBAAC,UAAU,IACT,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,SAAS,EAAE;gBACb,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;gBACZ,OAAO;aACR;YAED,MAAM,aAAN,MAAM,uBAAN,MAAM,EAAI,CAAC;QACb,CAAC,IAEA,SAAS,CAAC,CAAC,CAAC,oBAAC,QAAQ,OAAG,CAAC,CAAC,CAAC,oBAAC,OAAO,OAAG,CAC5B,CACd,CAAC;AACJ,CAAC","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\nimport * as React from \"react\";\nimport { SvgPause, SvgPlay } from \"@itwin/itwinui-icons-react\";\nimport { IconButton } from \"@itwin/itwinui-react\";\nimport { useTranslation } from \"../useTranslation\";\n\ninterface PlayButtonProps {\n isPlaying: boolean;\n onPlay?: () => void;\n onPause?: () => void;\n}\n\n/** Play/pause button used in timeline components.\n * @internal\n */\nexport function PlayButton({ isPlaying, onPlay, onPause }: PlayButtonProps) {\n const { translate } = useTranslation();\n const label = translate(isPlaying ? \"timeline.pause\" : \"timeline.play\");\n\n return (\n <IconButton\n styleType=\"borderless\"\n label={label}\n onClick={() => {\n if (isPlaying) {\n onPause?.();\n return;\n }\n\n onPlay?.();\n }}\n >\n {isPlaying ? <SvgPause /> : <SvgPlay />}\n </IconButton>\n );\n}\n"]}

package/lib/esm/imodel-components-react/timeline/Scrubber.js CHANGED Viewed

@@ -127,7 +127,7 @@ export function Scrubber(props) {
         sliderContainer &&
             setPointerPercent(getPercentageOfRectangle(sliderContainer.getBoundingClientRect(), event.clientX));
     }, [sliderContainer]);
-    const thumbHasFocus = useFocusedThumb(sliderContainer ?? undefined);
+    const thumbHasFocus = useFocusedThumb(sliderContainer !== null && sliderContainer !== void 0 ? sliderContainer : undefined);
     const tickLabel = React.useMemo(() => {
         const showTip = isPlaying || showRailTooltip || thumbHasFocus;
         const percent = isPlaying || thumbHasFocus

package/lib/esm/imodel-components-react/timeline/Scrubber.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Scrubber.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/Scrubber.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\nimport \"./Scrubber.scss\";\nimport * as React from \"react\";\nimport { Slider } from \"@itwin/itwinui-react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { useEventListener } from \"@itwin/core-react\";\nimport { toDateString, toTimeString } from \"@itwin/components-react\";\nimport type { TimelineDateMarkerProps } from \"./TimelineComponent\";\n\n/*\n @internal\n /\nexport function getPercentageOfRectangle(rect: DOMRect, pointer: number) {\n const position = Math.min(rect.right, Math.max(rect.left, pointer));\n return (position - rect.left) / rect.width;\n}\n\n// istanbul ignore next - WIP\nconst formatDuration = (value: number) => {\n const addZero = (i: number) => {\n return i < 10 ? `0${i}` : i;\n };\n\n const date = new Date(value);\n const minutes = date.getUTCMinutes();\n const seconds = date.getUTCSeconds();\n return `${addZero(minutes)}:${addZero(seconds)}`;\n};\n\nconst formatDate = (\n startDate: Date,\n endDate: Date,\n fraction: number,\n timeZoneOffset?: number\n) => {\n const delta = (endDate.getTime() - startDate.getTime()) fraction;\n const date = new Date(startDate.getTime() + delta);\n return toDateString(date, timeZoneOffset);\n};\n\n// istanbul ignore next - WIP\nconst formatTime = (\n startDate: Date,\n endDate: Date,\n fraction: number,\n timeZoneOffset?: number\n) => {\n const delta = (endDate.getTime() - startDate.getTime()) * fraction;\n const date = new Date(startDate.getTime() + delta);\n return ` ${toTimeString(date, timeZoneOffset)}`;\n};\n\nfunction generateToolTipText(\n showTime: boolean,\n percent: number,\n min: number,\n max: number,\n startDate?: Date,\n endDate?: Date,\n timeZoneOffset = 0\n) {\n if (startDate && endDate)\n return `${formatDate(startDate, endDate, percent, timeZoneOffset)}${\n showTime ? formatTime(startDate, endDate, percent, timeZoneOffset) : \"\"\n } `;\n\n const val = Math.round(min + (max - min) * percent);\n return formatDuration(val);\n}\n\nfunction getPercentageFromDate(startDate: Date, endDate: Date, date?: Date) {\n const newDate = date ? date : new Date();\n const startTime = startDate.getTime();\n const totalDuration = endDate.getTime() - startTime;\n return (newDate.getTime() - startTime) / totalDuration;\n}\n\nfunction getDateMarker(\n dateMarkerPropsIn: TimelineDateMarkerProps,\n startDate: Date,\n endDate: Date\n): DateMarkerProps {\n const percentage = getPercentageFromDate(\n startDate,\n endDate,\n dateMarkerPropsIn.date\n );\n const marker = dateMarkerPropsIn.dateMarker ? (\n dateMarkerPropsIn.dateMarker\n ) : (\n <span className=\"date-marker-default\"></span>\n );\n return { datePercentage: percentage, dateMarker: marker };\n}\n\nfunction markDateInTimelineRange(\n dateMarkerProps?: TimelineDateMarkerProps,\n startDate?: Date,\n endDate?: Date\n): boolean {\n // istanbul ignore else\n if (dateMarkerProps && startDate && endDate) {\n const inDate = dateMarkerProps.date ? dateMarkerProps.date : new Date();\n // istanbul ignore else\n if (\n inDate.getTime() >= startDate.getTime() &&\n inDate.getTime() <= endDate.getTime()\n )\n return true;\n }\n return false;\n}\n\n/** @internal /\nexport function RailMarkers({\n showToolTip,\n percent,\n tooltipText,\n markDate,\n}: {\n showToolTip: boolean;\n percent: number;\n tooltipText: string;\n markDate?: DateMarkerProps;\n}) {\n return (\n <div className=\"components-timeline-rail-marker-container\">\n {showToolTip && (\n <div\n className=\"components-timeline-tooltip\"\n style={{ left: `${Math.round(percent 100)}% ` }}\n >\n <span className=\"tooltip-text\">{tooltipText}</span>\n </div>\n )}\n {markDate && (\n <div\n className=\"components-timeline-date-marker\"\n data-testid=\"test-date-marker\"\n style={{ left: `${Math.round(markDate.datePercentage * 100)}% ` }}\n >\n {markDate.dateMarker}\n </div>\n )}\n </div>\n );\n}\n\n/*\n Custom Timeline Thumb\n * @internal\n /\nexport function CustomThumb() {\n return (\n <div className=\"scrubber-handle\">\n <div />\n <div />\n <div />\n </div>\n );\n}\n\n/\n @internal\n /\nexport function useFocusedThumb(sliderContainer: HTMLDivElement \| undefined) {\n const [thumbElement, setThumbElement] = React.useState<HTMLDivElement>();\n\n React.useLayoutEffect(() => {\n if (!sliderContainer) return;\n const element = sliderContainer.querySelector(\".components-timeline-thumb\");\n if (!element) return;\n setThumbElement(element as HTMLDivElement);\n }, [sliderContainer, thumbElement]);\n\n const [thumbHasFocus, setThumbHasFocus] = React.useState(false);\n\n const handleThumbFocus = React.useCallback(() => {\n setThumbHasFocus(true);\n }, []);\n\n const handleThumbBlur = React.useCallback(() => {\n setThumbHasFocus(false);\n }, []);\n\n useEventListener(\"focus\", handleThumbFocus, thumbElement);\n useEventListener(\"blur\", handleThumbBlur, thumbElement);\n return thumbHasFocus;\n}\n\n/* Properties for Scrubber/Slider used on timeline control\n * @internal\n /\nexport interface ScrubberProps extends CommonProps {\n currentDuration: number;\n totalDuration: number;\n isPlaying: boolean;\n startDate?: Date;\n endDate?: Date;\n showTime?: boolean;\n onChange?: (values: ReadonlyArray<number>) => void;\n onUpdate?: (values: ReadonlyArray<number>) => void;\n timeZoneOffset?: number;\n markDate?: TimelineDateMarkerProps;\n}\n\n/* Properties for marking current date in RailMarkers\n * @internal\n /\ninterface DateMarkerProps {\n datePercentage: number;\n dateMarker?: React.ReactNode;\n}\n/* Scrubber/Slider for timeline control\n * @internal\n */\nexport function Scrubber(props: ScrubberProps) {\n const {\n startDate,\n endDate,\n showTime,\n isPlaying,\n totalDuration,\n timeZoneOffset,\n currentDuration,\n className,\n onChange,\n onUpdate,\n } = props;\n\n const [sliderContainer, setSliderContainer] =\n React.useState<HTMLDivElement \| null>(null);\n const [pointerPercent, setPointerPercent] = React.useState(0);\n\n const tooltipProps = React.useCallback(() => {\n return { visible: false };\n }, []);\n\n const [showRailTooltip, setShowRailTooltip] = React.useState(false);\n\n // istanbul ignore next\n const handlePointerEnter = React.useCallback(() => {\n setShowRailTooltip(true);\n }, []);\n\n // istanbul ignore next\n const handlePointerLeave = React.useCallback(() => {\n setShowRailTooltip(false);\n }, []);\n\n const handlePointerMove = React.useCallback(\n (event: React.PointerEvent) => {\n sliderContainer &&\n setPointerPercent(\n getPercentageOfRectangle(\n sliderContainer.getBoundingClientRect(),\n event.clientX\n )\n );\n },\n [sliderContainer]\n );\n\n const thumbHasFocus = useFocusedThumb(sliderContainer ?? undefined);\n\n const tickLabel = React.useMemo(() => {\n const showTip = isPlaying \|\| showRailTooltip \|\| thumbHasFocus;\n const percent =\n isPlaying \|\| thumbHasFocus\n ? currentDuration / totalDuration\n : pointerPercent;\n const markDateInRange = markDateInTimelineRange(\n props.markDate,\n startDate,\n endDate\n );\n const currentDateMarker =\n props.markDate && markDateInRange && startDate && endDate\n ? getDateMarker(props.markDate, startDate, endDate)\n : undefined;\n const tooltipText = generateToolTipText(\n !!showTime,\n percent,\n 0,\n totalDuration,\n startDate,\n endDate,\n timeZoneOffset\n );\n return (\n <RailMarkers\n showToolTip={showTip}\n percent={percent}\n tooltipText={tooltipText}\n markDate={currentDateMarker}\n />\n );\n }, [\n isPlaying,\n showRailTooltip,\n currentDuration,\n totalDuration,\n pointerPercent,\n startDate,\n endDate,\n timeZoneOffset,\n showTime,\n thumbHasFocus,\n props.markDate,\n ]);\n\n return (\n <Slider\n ref={setSliderContainer}\n className={className}\n step={1}\n min={0}\n max={totalDuration}\n minLabel=\"\"\n maxLabel=\"\"\n onUpdate={onUpdate}\n onChange={onChange}\n values={[currentDuration]}\n tooltipProps={tooltipProps}\n thumbProps={() => ({\n children: <CustomThumb />,\n className: \"components-timeline-thumb\",\n })}\n tickLabels={tickLabel}\n onPointerEnter={handlePointerEnter}\n onPointerMove={handlePointerMove}\n onPointerLeave={handlePointerLeave}\n />\n );\n}\n"]}
1	+ {"version":3,"file":"Scrubber.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/Scrubber.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\nimport \"./Scrubber.scss\";\nimport * as React from \"react\";\nimport { Slider } from \"@itwin/itwinui-react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { useEventListener } from \"@itwin/core-react\";\nimport { toDateString, toTimeString } from \"@itwin/components-react\";\nimport type { TimelineDateMarkerProps } from \"./TimelineComponent\";\n\n/*\n @internal\n /\nexport function getPercentageOfRectangle(rect: DOMRect, pointer: number) {\n const position = Math.min(rect.right, Math.max(rect.left, pointer));\n return (position - rect.left) / rect.width;\n}\n\n// istanbul ignore next - WIP\nconst formatDuration = (value: number) => {\n const addZero = (i: number) => {\n return i < 10 ? `0${i}` : i;\n };\n\n const date = new Date(value);\n const minutes = date.getUTCMinutes();\n const seconds = date.getUTCSeconds();\n return `${addZero(minutes)}:${addZero(seconds)}`;\n};\n\nconst formatDate = (\n startDate: Date,\n endDate: Date,\n fraction: number,\n timeZoneOffset?: number\n) => {\n const delta = (endDate.getTime() - startDate.getTime()) fraction;\n const date = new Date(startDate.getTime() + delta);\n return toDateString(date, timeZoneOffset);\n};\n\n// istanbul ignore next - WIP\nconst formatTime = (\n startDate: Date,\n endDate: Date,\n fraction: number,\n timeZoneOffset?: number\n) => {\n const delta = (endDate.getTime() - startDate.getTime()) * fraction;\n const date = new Date(startDate.getTime() + delta);\n return ` ${toTimeString(date, timeZoneOffset)}`;\n};\n\nfunction generateToolTipText(\n showTime: boolean,\n percent: number,\n min: number,\n max: number,\n startDate?: Date,\n endDate?: Date,\n timeZoneOffset = 0\n) {\n if (startDate && endDate)\n return `${formatDate(startDate, endDate, percent, timeZoneOffset)}${\n showTime ? formatTime(startDate, endDate, percent, timeZoneOffset) : \"\"\n } `;\n\n const val = Math.round(min + (max - min) * percent);\n return formatDuration(val);\n}\n\nfunction getPercentageFromDate(startDate: Date, endDate: Date, date?: Date) {\n const newDate = date ? date : new Date();\n const startTime = startDate.getTime();\n const totalDuration = endDate.getTime() - startTime;\n return (newDate.getTime() - startTime) / totalDuration;\n}\n\nfunction getDateMarker(\n dateMarkerPropsIn: TimelineDateMarkerProps,\n startDate: Date,\n endDate: Date\n): DateMarkerProps {\n const percentage = getPercentageFromDate(\n startDate,\n endDate,\n dateMarkerPropsIn.date\n );\n const marker = dateMarkerPropsIn.dateMarker ? (\n dateMarkerPropsIn.dateMarker\n ) : (\n <span className=\"date-marker-default\"></span>\n );\n return { datePercentage: percentage, dateMarker: marker };\n}\n\nfunction markDateInTimelineRange(\n dateMarkerProps?: TimelineDateMarkerProps,\n startDate?: Date,\n endDate?: Date\n): boolean {\n // istanbul ignore else\n if (dateMarkerProps && startDate && endDate) {\n const inDate = dateMarkerProps.date ? dateMarkerProps.date : new Date();\n // istanbul ignore else\n if (\n inDate.getTime() >= startDate.getTime() &&\n inDate.getTime() <= endDate.getTime()\n )\n return true;\n }\n return false;\n}\n\n/** @internal /\nexport function RailMarkers({\n showToolTip,\n percent,\n tooltipText,\n markDate,\n}: {\n showToolTip: boolean;\n percent: number;\n tooltipText: string;\n markDate?: DateMarkerProps;\n}) {\n return (\n <div className=\"components-timeline-rail-marker-container\">\n {showToolTip && (\n <div\n className=\"components-timeline-tooltip\"\n style={{ left: `${Math.round(percent 100)}% ` }}\n >\n <span className=\"tooltip-text\">{tooltipText}</span>\n </div>\n )}\n {markDate && (\n <div\n className=\"components-timeline-date-marker\"\n data-testid=\"test-date-marker\"\n style={{ left: `${Math.round(markDate.datePercentage * 100)}% ` }}\n >\n {markDate.dateMarker}\n </div>\n )}\n </div>\n );\n}\n\n/*\n Custom Timeline Thumb\n * @internal\n /\nexport function CustomThumb() {\n return (\n <div className=\"scrubber-handle\">\n <div />\n <div />\n <div />\n </div>\n );\n}\n\n/\n @internal\n /\nexport function useFocusedThumb(sliderContainer: HTMLDivElement \| undefined) {\n const [thumbElement, setThumbElement] = React.useState<HTMLDivElement>();\n\n React.useLayoutEffect(() => {\n if (!sliderContainer) return;\n const element = sliderContainer.querySelector(\".components-timeline-thumb\");\n if (!element) return;\n setThumbElement(element as HTMLDivElement);\n }, [sliderContainer, thumbElement]);\n\n const [thumbHasFocus, setThumbHasFocus] = React.useState(false);\n\n const handleThumbFocus = React.useCallback(() => {\n setThumbHasFocus(true);\n }, []);\n\n const handleThumbBlur = React.useCallback(() => {\n setThumbHasFocus(false);\n }, []);\n\n useEventListener(\"focus\", handleThumbFocus, thumbElement);\n useEventListener(\"blur\", handleThumbBlur, thumbElement);\n return thumbHasFocus;\n}\n\n/* Properties for Scrubber/Slider used on timeline control\n * @internal\n /\nexport interface ScrubberProps extends CommonProps {\n currentDuration: number;\n totalDuration: number;\n isPlaying: boolean;\n startDate?: Date;\n endDate?: Date;\n showTime?: boolean;\n onChange?: (values: ReadonlyArray<number>) => void;\n onUpdate?: (values: ReadonlyArray<number>) => void;\n timeZoneOffset?: number;\n markDate?: TimelineDateMarkerProps;\n}\n\n/* Properties for marking current date in RailMarkers\n * @internal\n /\ninterface DateMarkerProps {\n datePercentage: number;\n dateMarker?: React.ReactNode;\n}\n/* Scrubber/Slider for timeline control\n * @internal\n */\nexport function Scrubber(props: ScrubberProps) {\n const {\n startDate,\n endDate,\n showTime,\n isPlaying,\n totalDuration,\n timeZoneOffset,\n currentDuration,\n className,\n onChange,\n onUpdate,\n } = props;\n\n const [sliderContainer, setSliderContainer] =\n React.useState<HTMLDivElement \| null>(null);\n const [pointerPercent, setPointerPercent] = React.useState(0);\n\n const tooltipProps = React.useCallback(() => {\n return { visible: false };\n }, []);\n\n const [showRailTooltip, setShowRailTooltip] = React.useState(false);\n\n // istanbul ignore next\n const handlePointerEnter = React.useCallback(() => {\n setShowRailTooltip(true);\n }, []);\n\n // istanbul ignore next\n const handlePointerLeave = React.useCallback(() => {\n setShowRailTooltip(false);\n }, []);\n\n const handlePointerMove = React.useCallback(\n (event: React.PointerEvent) => {\n sliderContainer &&\n setPointerPercent(\n getPercentageOfRectangle(\n sliderContainer.getBoundingClientRect(),\n event.clientX\n )\n );\n },\n [sliderContainer]\n );\n\n const thumbHasFocus = useFocusedThumb(sliderContainer ?? undefined);\n\n const tickLabel = React.useMemo(() => {\n const showTip = isPlaying \|\| showRailTooltip \|\| thumbHasFocus;\n const percent =\n isPlaying \|\| thumbHasFocus\n ? currentDuration / totalDuration\n : pointerPercent;\n const markDateInRange = markDateInTimelineRange(\n props.markDate,\n startDate,\n endDate\n );\n const currentDateMarker =\n props.markDate && markDateInRange && startDate && endDate\n ? getDateMarker(props.markDate, startDate, endDate)\n : undefined;\n const tooltipText = generateToolTipText(\n !!showTime,\n percent,\n 0,\n totalDuration,\n startDate,\n endDate,\n timeZoneOffset\n );\n return (\n <RailMarkers\n showToolTip={showTip}\n percent={percent}\n tooltipText={tooltipText}\n markDate={currentDateMarker}\n />\n );\n }, [\n isPlaying,\n showRailTooltip,\n currentDuration,\n totalDuration,\n pointerPercent,\n startDate,\n endDate,\n timeZoneOffset,\n showTime,\n thumbHasFocus,\n props.markDate,\n ]);\n\n return (\n <Slider\n ref={setSliderContainer}\n className={className}\n step={1}\n min={0}\n max={totalDuration}\n minLabel=\"\"\n maxLabel=\"\"\n onUpdate={onUpdate}\n onChange={onChange}\n values={[currentDuration]}\n tooltipProps={tooltipProps}\n thumbProps={() => ({\n children: <CustomThumb />,\n className: \"components-timeline-thumb\",\n })}\n tickLabels={tickLabel}\n onPointerEnter={handlePointerEnter}\n onPointerMove={handlePointerMove}\n onPointerLeave={handlePointerLeave}\n />\n );\n}\n"]}

package/lib/esm/imodel-components-react/timeline/SolarTimeline.d.ts CHANGED Viewed

@@ -30,23 +30,12 @@ interface SolarTimelineComponentState {
  * @alpha
  */
 export declare class SolarTimeline extends React.PureComponent<SolarTimelineComponentProps, SolarTimelineComponentState> {
-    private _datePicker;
-    private _settings;
     private _requestFrame;
     private _unmounted;
     private _timeLastCycle;
     private _totalPlayTime;
-    private _settingsPopupTitle;
-    private _playLabel;
-    private _settingLabel;
-    private _loopLabel;
-    private _speedLabel;
-    private _dateTimeLabel;
-    private _months;
-    private _timeLabel;
-    private _amLabel;
-    private _pmLabel;
     private readonly _presetColors;
+    private readonly _speeds;
     constructor(props: SolarTimelineComponentProps);
     componentWillUnmount(): void;
     private _updateAnimation;
@@ -54,12 +43,7 @@ export declare class SolarTimeline extends React.PureComponent<SolarTimelineComp
     private _onPause;
     private _onPlay;
     private setPlaybackTimeBySunTime;
-    /** note the day passed in is in the time of the current user not in project time because the date picker works in
-     * local time  */
-    private _onDayClick;
-    private _onTimeChanged;
-    private _onCloseDayPicker;
-    private _onOpenDayPicker;
+    private _onDateChange;
     private _onCloseSettingsPopup;
     private _onOpenSettingsPopup;
     private ensureRange;
@@ -69,8 +53,6 @@ export declare class SolarTimeline extends React.PureComponent<SolarTimelineComp
     private _onSpeedChange;
     private _onToggleLoop;
     private _formatTime;
-    private _onPresetColorPick;
-    private _handleHueOrSaturationChange;
     getLocalTime(ticks: number): Date;
     render(): React.JSX.Element;
 }

package/lib/esm/imodel-components-react/timeline/SolarTimeline.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SolarTimeline.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/SolarTimeline.tsx"],"names":[],"mappings":"AAIA;;GAEG;~~AAKH~~,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;~~AAI~~/B,OAAO,EAAe,QAAQ,EAAE,MAAM,oBAAoB,CAAC;~~AAc3D~~,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;~~AAuJtD~~,UAAU,2BAA2B;IACnC,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,2BAA2B;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,WAAW,EAAE,QAAQ,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,aAAa,CACpD,2BAA2B,EAC3B,2BAA2B,CAC5B;IACC,OAAO,CAAC,~~WAAW,CAA4B;IAC/C,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,~~aAAa,CAAK;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,cAAc,CAAK;~~IAC3B~~,OAAO,CAAC,~~mBAAmB~~,~~CAEzB;IACF,OAAO,~~CAAC,~~UAAU,CAAsD;IACxE,OAAO,CAAC,~~aAAa,~~CAEnB~~;~~IACF,OAAO,CAAC,UAAU,CAAmD;IACrE,OAAO,CAAC,WAAW,CAAuD;IAC1E,OAAO,CAAC,cAAc,CAEpB;~~IAEF,OAAO,CAAC,~~OAAO,CAab;IAEF,OAAO,CAAC,UAAU,CAA6C;IAC/D,OAAO,CAAC,~~QAAQ,~~CAAqC;IACrD,OAAO,~~CAAC,~~QAAQ,CAAqC;IACrD,~~OAAO,~~CAAC,QAAQ,CAAC,aAAa,CAS5B~~;~~gBAEU~~,KAAK,EAAE,2BAA2B;IA8C9B,oBAAoB;IAMpC,OAAO,CAAC,gBAAgB,~~CA6CtB~~;IAEF,OAAO,CAAC,KAAK;~~IAYb~~,OAAO,CAAC,QAAQ,~~CAed~~;IAGF,OAAO,CAAC,OAAO,~~CAab~~;IAEF,OAAO,CAAC,wBAAwB;IAWhC~~;qBACiB;IACjB~~,OAAO,CAAC,~~WAAW~~,~~CAoCjB~~;IAEF,OAAO,CAAC,~~cAAc,CA2BpB;IAEF,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,~~qBAAqB,CAE3B;IAEF,OAAO,CAAC,oBAAoB,CAI1B;IAEF,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,oBAAoB;IA0B5B,OAAO,CAAC,SAAS,CAEf;IAEF,OAAO,CAAC,SAAS,CAEf;IAEF,OAAO,CAAC,cAAc,CAGpB;IAEF,OAAO,CAAC,aAAa,CAEnB;IAEF,OAAO,CAAC,WAAW,~~CAajB~~;~~IAEF,OAAO,CAAC,kBAAkB,CAKxB;IAEF,OAAO,CAAC,4BAA4B,CAUlC;~~IAEK,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IASxB,MAAM;~~CAgNvB~~"}
1	+ {"version":3,"file":"SolarTimeline.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/SolarTimeline.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAe,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AA4B3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AA6EtD,UAAU,2BAA2B;IACnC,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,2BAA2B;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,WAAW,EAAE,QAAQ,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,aAAa,CACpD,2BAA2B,EAC3B,2BAA2B,CAC5B;IACC,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,cAAc,CAAK;IAE3B,OAAO,CAAC,QAAQ,CAAC,aAAa,CAS5B;IAEF,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAsB;gBAElC,KAAK,EAAE,2BAA2B;IA8C9B,oBAAoB;IAMpC,OAAO,CAAC,gBAAgB,CA4CtB;IAEF,OAAO,CAAC,KAAK;IAWb,OAAO,CAAC,QAAQ,CAad;IAGF,OAAO,CAAC,OAAO,CAYb;IAEF,OAAO,CAAC,wBAAwB;IAWhC,OAAO,CAAC,aAAa,CAyCnB;IAEF,OAAO,CAAC,qBAAqB,CAE3B;IAEF,OAAO,CAAC,oBAAoB,CAI1B;IAEF,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,oBAAoB;IA0B5B,OAAO,CAAC,SAAS,CAEf;IAEF,OAAO,CAAC,SAAS,CAEf;IAEF,OAAO,CAAC,cAAc,CAGpB;IAEF,OAAO,CAAC,aAAa,CAEnB;IAEF,OAAO,CAAC,WAAW,CAoBjB;IAEK,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IASxB,MAAM;CA8JvB"}