@elliemae/ds-form-toggle 3.2.1-rc.4 → 3.2.1-rc.7
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/dist/cjs/ControlledToggle.js +9 -36
- package/dist/cjs/ControlledToggle.js.map +1 -1
- package/dist/cjs/propTypes.js +4 -19
- package/dist/cjs/propTypes.js.map +1 -1
- package/dist/esm/ControlledToggle.js +9 -38
- package/dist/esm/ControlledToggle.js.map +1 -1
- package/dist/esm/propTypes.js +4 -21
- package/dist/esm/propTypes.js.map +1 -1
- package/package.json +4 -4
|
@@ -1,39 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __create = Object.create;
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
|
-
var __defProps = Object.defineProperties;
|
|
5
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
10
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
-
var __spreadValues = (a, b) => {
|
|
14
|
-
for (var prop in b || (b = {}))
|
|
15
|
-
if (__hasOwnProp.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
if (__getOwnPropSymbols)
|
|
18
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
-
if (__propIsEnum.call(b, prop))
|
|
20
|
-
__defNormalProp(a, prop, b[prop]);
|
|
21
|
-
}
|
|
22
|
-
return a;
|
|
23
|
-
};
|
|
24
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
|
-
var __objRest = (source, exclude) => {
|
|
26
|
-
var target = {};
|
|
27
|
-
for (var prop in source)
|
|
28
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
29
|
-
target[prop] = source[prop];
|
|
30
|
-
if (source != null && __getOwnPropSymbols)
|
|
31
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
32
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
33
|
-
target[prop] = source[prop];
|
|
34
|
-
}
|
|
35
|
-
return target;
|
|
36
|
-
};
|
|
37
8
|
var __export = (target, all) => {
|
|
38
9
|
for (var name in all)
|
|
39
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -64,7 +35,7 @@ var import_addTooltipOnReadOnly = require("./utils/addTooltipOnReadOnly");
|
|
|
64
35
|
const DSControlledToggle = (props) => {
|
|
65
36
|
const propsWithDefaults = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_propTypes.defaultProps);
|
|
66
37
|
(0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefaults, import_propTypes.propTypes);
|
|
67
|
-
const
|
|
38
|
+
const { labelOn, labelOff, value, checked, onChange, size, readOnly, active, disabled, containerProps, id, ...rest } = propsWithDefaults;
|
|
68
39
|
const [isLongerTextRendering, setIsLongerTextRendering] = (0, import_react.useState)(false);
|
|
69
40
|
const [width, setWidth] = (0, import_react.useState)(0);
|
|
70
41
|
const labelTextRef = (0, import_react.useRef)(null);
|
|
@@ -89,12 +60,13 @@ const DSControlledToggle = (props) => {
|
|
|
89
60
|
}, [disabled, readOnly, onChange]);
|
|
90
61
|
const globalAttrs = (0, import_ds_utilities.useGetGlobalAttributes)(rest, { onClick: handleOnChange });
|
|
91
62
|
const xStyledProps = (0, import_ds_utilities.useGetXstyledProps)(rest);
|
|
92
|
-
return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledContainer,
|
|
63
|
+
return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledContainer, {
|
|
93
64
|
size,
|
|
94
|
-
"data-testid": "ds-controlled-toggle"
|
|
95
|
-
|
|
65
|
+
"data-testid": "ds-controlled-toggle",
|
|
66
|
+
...containerProps,
|
|
67
|
+
...xStyledProps,
|
|
96
68
|
disabled
|
|
97
|
-
}
|
|
69
|
+
}, (0, import_addTooltipOnReadOnly.addTooltipOnReadOnly)(/* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledButton, {
|
|
98
70
|
role: "switch",
|
|
99
71
|
value,
|
|
100
72
|
type: "button",
|
|
@@ -106,8 +78,9 @@ const DSControlledToggle = (props) => {
|
|
|
106
78
|
tabIndex: disabled ? -1 : 0,
|
|
107
79
|
onClick: handleOnChange,
|
|
108
80
|
readOnly,
|
|
109
|
-
disabled
|
|
110
|
-
|
|
81
|
+
disabled,
|
|
82
|
+
...globalAttrs
|
|
83
|
+
}), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledLabel, {
|
|
111
84
|
checked,
|
|
112
85
|
size,
|
|
113
86
|
width
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ControlledToggle.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';\nimport { uid } from 'uid';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { propTypes, defaultProps, type DSControlledToggleT } from './propTypes';\nimport {\n StyledContainer,\n StyledButton,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles';\nimport { addTooltipOnReadOnly } from './utils/addTooltipOnReadOnly';\n\nconst DSControlledToggle = (props: DSControlledToggleT.Props): JSX.Element => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, propTypes);\n const { labelOn, labelOff, value, checked, onChange, size, readOnly, active, disabled, containerProps, id, ...rest } =\n propsWithDefaults;\n\n const [isLongerTextRendering, setIsLongerTextRendering] = useState<boolean>(false);\n const [width, setWidth] = useState<number>(0);\n const labelTextRef = useRef<HTMLDivElement | null>(null);\n const widthTextRef = useRef<HTMLDivElement | null>(null);\n\n const longerText = useMemo(() => (labelOn.length > labelOff.length ? labelOn : labelOff), [labelOff, labelOn]);\n\n const instanceUID = useMemo(() => id || uid(5), [id]);\n\n useEffect(() => {\n if (labelTextRef.current) {\n setIsLongerTextRendering(labelTextRef.current.innerText === longerText);\n }\n }, [labelTextRef, longerText, checked]);\n\n useEffect(() => {\n if (widthTextRef.current) {\n setWidth(widthTextRef.current.clientWidth);\n }\n }, [widthTextRef]);\n\n const handleOnChange = useCallback(() => {\n if (disabled || readOnly) return;\n if (onChange) onChange();\n }, [disabled, readOnly, onChange]);\n\n const globalAttrs = useGetGlobalAttributes(rest, { onClick: handleOnChange });\n const xStyledProps = useGetXstyledProps(rest);\n\n return (\n <StyledContainer\n size={size}\n data-testid=\"ds-controlled-toggle\"\n {...containerProps}\n {...xStyledProps}\n disabled={disabled}\n >\n {addTooltipOnReadOnly(\n <>\n <StyledButton\n role=\"switch\"\n value={value}\n type=\"button\"\n data-testid=\"ds-controlled-toggle-checkbox\"\n id={instanceUID}\n aria-readonly={readOnly}\n aria-disabled={disabled}\n aria-checked={checked}\n tabIndex={disabled ? -1 : 0}\n onClick={handleOnChange}\n readOnly={readOnly}\n disabled={disabled}\n {...globalAttrs}\n />\n <StyledLabel checked={checked} size={size} width={width}>\n <StyledVisibleContent\n checked={checked}\n size={size}\n readOnly={readOnly}\n active={active}\n disabled={disabled}\n htmlFor={id ? undefined : instanceUID}\n as={id ? 'div' : 'label'}\n >\n <StyledCircle checked={checked} size={size} readOnly={readOnly} disabled={disabled} />\n <StyledText\n aria-hidden=\"true\"\n ref={labelTextRef}\n isLongerTextRendering={isLongerTextRendering}\n checked={checked}\n size={size}\n disabled={disabled}\n >\n {checked ? labelOn : labelOff}\n </StyledText>\n </StyledVisibleContent>\n </StyledLabel>\n <SetLabelWidth size={size} ref={widthTextRef}>\n {longerText}\n </SetLabelWidth>\n </>,\n readOnly,\n )}\n </StyledContainer>\n );\n};\n\nDSControlledToggle.propTypes = propTypes;\nDSControlledToggle.displayName = 'DSControlledToggle';\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = propTypes;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyE;AACzE,iBAAoB;AACpB,0BAMO;AACP,uBAAkE;AAClE,oBAQO;AACP,kCAAqC;AAErC,MAAM,qBAAqB,CAAC,UAAkD;AAC5E,QAAM,oBAAoB,sDAA6B,OAAO,6BAAY;AAC1E,0DAA+B,mBAAmB,0BAAS;AAC3D,QAAM,EAAE,SAAS,UAAU,OAAO,SAAS,UAAU,MAAM,UAAU,QAAQ,UAAU,gBAAgB,OAAO,SAC5G;AAEF,QAAM,CAAC,uBAAuB,4BAA4B,2BAAkB,KAAK;AACjF,QAAM,CAAC,OAAO,YAAY,2BAAiB,CAAC;AAC5C,QAAM,eAAe,yBAA8B,IAAI;AACvD,QAAM,eAAe,yBAA8B,IAAI;AAEvD,QAAM,aAAa,0BAAQ,MAAO,QAAQ,SAAS,SAAS,SAAS,UAAU,UAAW,CAAC,UAAU,OAAO,CAAC;AAE7G,QAAM,cAAc,0BAAQ,MAAM,MAAM,oBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAEpD,8BAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,+BAAyB,aAAa,QAAQ,cAAc,UAAU;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,OAAO,CAAC;AAEtC,8BAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,eAAS,aAAa,QAAQ,WAAW;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,iBAAiB,8BAAY,MAAM;AACvC,QAAI,YAAY;AAAU;AAC1B,QAAI;AAAU,eAAS;AAAA,EACzB,GAAG,CAAC,UAAU,UAAU,QAAQ,CAAC;AAEjC,QAAM,cAAc,gDAAuB,MAAM,EAAE,SAAS,eAAe,CAAC;AAC5E,QAAM,eAAe,4CAAmB,IAAI;AAE5C,SACE,mDAAC;AAAA,IACC;AAAA,IACA,eAAY;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,IACJ;AAAA,KAEC,sDACC,wFACE,mDAAC;AAAA,IACC,MAAK;AAAA,IACL;AAAA,IACA,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,IAAI;AAAA,IACJ,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,gBAAc;AAAA,IACd,UAAU,WAAW,KAAK;AAAA,IAC1B,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACC,GAAG;AAAA,GACN,GACA,mDAAC;AAAA,IAAY;AAAA,IAAkB;AAAA,IAAY;AAAA,KACzC,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,KAAK,SAAY;AAAA,IAC1B,IAAI,KAAK,QAAQ;AAAA,KAEjB,mDAAC;AAAA,IAAa;AAAA,IAAkB;AAAA,IAAY;AAAA,IAAoB;AAAA,GAAoB,GACpF,mDAAC;AAAA,IACC,eAAY;AAAA,IACZ,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,UAAU,UAAU,QACvB,CACF,CACF,GACA,mDAAC;AAAA,IAAc;AAAA,IAAY,KAAK;AAAA,KAC7B,UACH,CACF,GACA,QACF,CACF;AAEJ;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,kCAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/propTypes.js
CHANGED
|
@@ -1,27 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __create = Object.create;
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
|
-
var __defProps = Object.defineProperties;
|
|
5
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
10
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
-
var __spreadValues = (a, b) => {
|
|
14
|
-
for (var prop in b || (b = {}))
|
|
15
|
-
if (__hasOwnProp.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
if (__getOwnPropSymbols)
|
|
18
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
-
if (__propIsEnum.call(b, prop))
|
|
20
|
-
__defNormalProp(a, prop, b[prop]);
|
|
21
|
-
}
|
|
22
|
-
return a;
|
|
23
|
-
};
|
|
24
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
8
|
var __export = (target, all) => {
|
|
26
9
|
for (var name in all)
|
|
27
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -55,7 +38,9 @@ const defaultProps = {
|
|
|
55
38
|
readonly: false,
|
|
56
39
|
disabled: false
|
|
57
40
|
};
|
|
58
|
-
const propTypes =
|
|
41
|
+
const propTypes = {
|
|
42
|
+
...import_ds_utilities.globalAttributesPropTypes,
|
|
43
|
+
...import_ds_utilities.xstyledPropTypes,
|
|
59
44
|
labelOn: import_ds_utilities.PropTypes.string.description("Label when toggle is checked"),
|
|
60
45
|
labelOff: import_ds_utilities.PropTypes.string.description("Label when toggle is unchecked"),
|
|
61
46
|
value: import_ds_utilities.PropTypes.string.description("Value attribute for toggle"),
|
|
@@ -68,5 +53,5 @@ const propTypes = __spreadProps(__spreadValues(__spreadValues({}, import_ds_util
|
|
|
68
53
|
disabled: import_ds_utilities.PropTypes.bool.description("Wether the toggle is disabled or not"),
|
|
69
54
|
containerProps: import_ds_utilities.PropTypes.shape({}).description("Set of properties attached to the main container"),
|
|
70
55
|
id: import_ds_utilities.PropTypes.string.description("Unique id.")
|
|
71
|
-
}
|
|
56
|
+
};
|
|
72
57
|
//# sourceMappingURL=propTypes.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { globalAttributesPropTypes, xstyledPropTypes, PropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSControlledToggleT {\n export type ToggleSize = 's' | 'm' | 'l';\n export interface Props {\n labelOn: string;\n labelOff: string;\n name: string;\n value: string;\n checked: boolean;\n onChange: () => void | null;\n size: ToggleSize;\n readOnly: boolean;\n disabled: boolean;\n containerProps: Record<string, unknown>;\n id: string;\n }\n}\nexport const defaultProps = {\n labelOn: 'ON',\n labelOff: 'OFF',\n name: '',\n value: '',\n checked: false,\n onClick: () => null,\n size: 'm',\n readonly: false,\n disabled: false,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n labelOn: PropTypes.string.description('Label when toggle is checked'),\n labelOff: PropTypes.string.description('Label when toggle is unchecked'),\n value: PropTypes.string.description('Value attribute for toggle'),\n name: PropTypes.string.description('Name attribute for toggle'),\n checked: PropTypes.bool.description('Wether the toggle is checked or not'),\n onchange: PropTypes.func.description('OnClick callback'),\n size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle'),\n readOnly: PropTypes.bool.description('Wether the toggle is readOnly or not'),\n active: PropTypes.bool.description('Wether the toggle has active styles or not').deprecated({ version: '3.x' }),\n disabled: PropTypes.bool.description('Wether the toggle is disabled or not'),\n containerProps: PropTypes.shape({}).description('Set of properties attached to the main container'),\n id: PropTypes.string.description('Unique id.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAuE;AAkBhE,MAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS,MAAM;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,8BAAU,OAAO,YAAY,8BAA8B;AAAA,EACpE,UAAU,8BAAU,OAAO,YAAY,gCAAgC;AAAA,EACvE,OAAO,8BAAU,OAAO,YAAY,4BAA4B;AAAA,EAChE,MAAM,8BAAU,OAAO,YAAY,2BAA2B;AAAA,EAC9D,SAAS,8BAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,8BAAU,KAAK,YAAY,kBAAkB;AAAA,EACvD,MAAM,8BAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACnE,UAAU,8BAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,QAAQ,8BAAU,KAAK,YAAY,4CAA4C,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC9G,UAAU,8BAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,gBAAgB,8BAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAClG,IAAI,8BAAU,OAAO,YAAY,YAAY;AAC/C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,35 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
-
var __spreadValues = (a, b) => {
|
|
10
|
-
for (var prop in b || (b = {}))
|
|
11
|
-
if (__hasOwnProp.call(b, prop))
|
|
12
|
-
__defNormalProp(a, prop, b[prop]);
|
|
13
|
-
if (__getOwnPropSymbols)
|
|
14
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
-
if (__propIsEnum.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
}
|
|
18
|
-
return a;
|
|
19
|
-
};
|
|
20
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
|
-
var __objRest = (source, exclude) => {
|
|
22
|
-
var target = {};
|
|
23
|
-
for (var prop in source)
|
|
24
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
-
target[prop] = source[prop];
|
|
26
|
-
if (source != null && __getOwnPropSymbols)
|
|
27
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
-
target[prop] = source[prop];
|
|
30
|
-
}
|
|
31
|
-
return target;
|
|
32
|
-
};
|
|
33
2
|
import * as React from "react";
|
|
34
3
|
import React2, { useState, useMemo, useRef, useEffect, useCallback } from "react";
|
|
35
4
|
import { uid } from "uid";
|
|
@@ -54,7 +23,7 @@ import { addTooltipOnReadOnly } from "./utils/addTooltipOnReadOnly";
|
|
|
54
23
|
const DSControlledToggle = (props) => {
|
|
55
24
|
const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
|
|
56
25
|
useValidateTypescriptPropTypes(propsWithDefaults, propTypes);
|
|
57
|
-
const
|
|
26
|
+
const { labelOn, labelOff, value, checked, onChange, size, readOnly, active, disabled, containerProps, id, ...rest } = propsWithDefaults;
|
|
58
27
|
const [isLongerTextRendering, setIsLongerTextRendering] = useState(false);
|
|
59
28
|
const [width, setWidth] = useState(0);
|
|
60
29
|
const labelTextRef = useRef(null);
|
|
@@ -79,12 +48,13 @@ const DSControlledToggle = (props) => {
|
|
|
79
48
|
}, [disabled, readOnly, onChange]);
|
|
80
49
|
const globalAttrs = useGetGlobalAttributes(rest, { onClick: handleOnChange });
|
|
81
50
|
const xStyledProps = useGetXstyledProps(rest);
|
|
82
|
-
return /* @__PURE__ */ React2.createElement(StyledContainer,
|
|
51
|
+
return /* @__PURE__ */ React2.createElement(StyledContainer, {
|
|
83
52
|
size,
|
|
84
|
-
"data-testid": "ds-controlled-toggle"
|
|
85
|
-
|
|
53
|
+
"data-testid": "ds-controlled-toggle",
|
|
54
|
+
...containerProps,
|
|
55
|
+
...xStyledProps,
|
|
86
56
|
disabled
|
|
87
|
-
}
|
|
57
|
+
}, addTooltipOnReadOnly(/* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledButton, {
|
|
88
58
|
role: "switch",
|
|
89
59
|
value,
|
|
90
60
|
type: "button",
|
|
@@ -96,8 +66,9 @@ const DSControlledToggle = (props) => {
|
|
|
96
66
|
tabIndex: disabled ? -1 : 0,
|
|
97
67
|
onClick: handleOnChange,
|
|
98
68
|
readOnly,
|
|
99
|
-
disabled
|
|
100
|
-
|
|
69
|
+
disabled,
|
|
70
|
+
...globalAttrs
|
|
71
|
+
}), /* @__PURE__ */ React2.createElement(StyledLabel, {
|
|
101
72
|
checked,
|
|
102
73
|
size,
|
|
103
74
|
width
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledToggle.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';\nimport { uid } from 'uid';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { propTypes, defaultProps, type DSControlledToggleT } from './propTypes';\nimport {\n StyledContainer,\n StyledButton,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles';\nimport { addTooltipOnReadOnly } from './utils/addTooltipOnReadOnly';\n\nconst DSControlledToggle = (props: DSControlledToggleT.Props): JSX.Element => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, propTypes);\n const { labelOn, labelOff, value, checked, onChange, size, readOnly, active, disabled, containerProps, id, ...rest } =\n propsWithDefaults;\n\n const [isLongerTextRendering, setIsLongerTextRendering] = useState<boolean>(false);\n const [width, setWidth] = useState<number>(0);\n const labelTextRef = useRef<HTMLDivElement | null>(null);\n const widthTextRef = useRef<HTMLDivElement | null>(null);\n\n const longerText = useMemo(() => (labelOn.length > labelOff.length ? labelOn : labelOff), [labelOff, labelOn]);\n\n const instanceUID = useMemo(() => id || uid(5), [id]);\n\n useEffect(() => {\n if (labelTextRef.current) {\n setIsLongerTextRendering(labelTextRef.current.innerText === longerText);\n }\n }, [labelTextRef, longerText, checked]);\n\n useEffect(() => {\n if (widthTextRef.current) {\n setWidth(widthTextRef.current.clientWidth);\n }\n }, [widthTextRef]);\n\n const handleOnChange = useCallback(() => {\n if (disabled || readOnly) return;\n if (onChange) onChange();\n }, [disabled, readOnly, onChange]);\n\n const globalAttrs = useGetGlobalAttributes(rest, { onClick: handleOnChange });\n const xStyledProps = useGetXstyledProps(rest);\n\n return (\n <StyledContainer\n size={size}\n data-testid=\"ds-controlled-toggle\"\n {...containerProps}\n {...xStyledProps}\n disabled={disabled}\n >\n {addTooltipOnReadOnly(\n <>\n <StyledButton\n role=\"switch\"\n value={value}\n type=\"button\"\n data-testid=\"ds-controlled-toggle-checkbox\"\n id={instanceUID}\n aria-readonly={readOnly}\n aria-disabled={disabled}\n aria-checked={checked}\n tabIndex={disabled ? -1 : 0}\n onClick={handleOnChange}\n readOnly={readOnly}\n disabled={disabled}\n {...globalAttrs}\n />\n <StyledLabel checked={checked} size={size} width={width}>\n <StyledVisibleContent\n checked={checked}\n size={size}\n readOnly={readOnly}\n active={active}\n disabled={disabled}\n htmlFor={id ? undefined : instanceUID}\n as={id ? 'div' : 'label'}\n >\n <StyledCircle checked={checked} size={size} readOnly={readOnly} disabled={disabled} />\n <StyledText\n aria-hidden=\"true\"\n ref={labelTextRef}\n isLongerTextRendering={isLongerTextRendering}\n checked={checked}\n size={size}\n disabled={disabled}\n >\n {checked ? labelOn : labelOff}\n </StyledText>\n </StyledVisibleContent>\n </StyledLabel>\n <SetLabelWidth size={size} ref={widthTextRef}>\n {longerText}\n </SetLabelWidth>\n </>,\n readOnly,\n )}\n </StyledContainer>\n );\n};\n\nDSControlledToggle.propTypes = propTypes;\nDSControlledToggle.displayName = 'DSControlledToggle';\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = propTypes;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAAA;ACAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;AAEA,MAAM,qBAAqB,CAAC,UAAkD;AAC5E,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAC1E,iCAA+B,mBAAmB,SAAS;AAC3D,QAAM,EAAE,SAAS,UAAU,OAAO,SAAS,UAAU,MAAM,UAAU,QAAQ,UAAU,gBAAgB,OAAO,SAC5G;AAEF,QAAM,CAAC,uBAAuB,4BAA4B,SAAkB,KAAK;AACjF,QAAM,CAAC,OAAO,YAAY,SAAiB,CAAC;AAC5C,QAAM,eAAe,OAA8B,IAAI;AACvD,QAAM,eAAe,OAA8B,IAAI;AAEvD,QAAM,aAAa,QAAQ,MAAO,QAAQ,SAAS,SAAS,SAAS,UAAU,UAAW,CAAC,UAAU,OAAO,CAAC;AAE7G,QAAM,cAAc,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAEpD,YAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,+BAAyB,aAAa,QAAQ,cAAc,UAAU;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,OAAO,CAAC;AAEtC,YAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,eAAS,aAAa,QAAQ,WAAW;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,YAAY;AAAU;AAC1B,QAAI;AAAU,eAAS;AAAA,EACzB,GAAG,CAAC,UAAU,UAAU,QAAQ,CAAC;AAEjC,QAAM,cAAc,uBAAuB,MAAM,EAAE,SAAS,eAAe,CAAC;AAC5E,QAAM,eAAe,mBAAmB,IAAI;AAE5C,SACE,qCAAC;AAAA,IACC;AAAA,IACA,eAAY;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,IACJ;AAAA,KAEC,qBACC,4DACE,qCAAC;AAAA,IACC,MAAK;AAAA,IACL;AAAA,IACA,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,IAAI;AAAA,IACJ,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,gBAAc;AAAA,IACd,UAAU,WAAW,KAAK;AAAA,IAC1B,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACC,GAAG;AAAA,GACN,GACA,qCAAC;AAAA,IAAY;AAAA,IAAkB;AAAA,IAAY;AAAA,KACzC,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,KAAK,SAAY;AAAA,IAC1B,IAAI,KAAK,QAAQ;AAAA,KAEjB,qCAAC;AAAA,IAAa;AAAA,IAAkB;AAAA,IAAY;AAAA,IAAoB;AAAA,GAAoB,GACpF,qCAAC;AAAA,IACC,eAAY;AAAA,IACZ,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,UAAU,UAAU,QACvB,CACF,CACF,GACA,qCAAC;AAAA,IAAc;AAAA,IAAY,KAAK;AAAA,KAC7B,UACH,CACF,GACA,QACF,CACF;AAEJ;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/propTypes.js
CHANGED
|
@@ -1,23 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
-
var __spreadValues = (a, b) => {
|
|
10
|
-
for (var prop in b || (b = {}))
|
|
11
|
-
if (__hasOwnProp.call(b, prop))
|
|
12
|
-
__defNormalProp(a, prop, b[prop]);
|
|
13
|
-
if (__getOwnPropSymbols)
|
|
14
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
-
if (__propIsEnum.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
}
|
|
18
|
-
return a;
|
|
19
|
-
};
|
|
20
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
2
|
import * as React from "react";
|
|
22
3
|
import { globalAttributesPropTypes, xstyledPropTypes, PropTypes } from "@elliemae/ds-utilities";
|
|
23
4
|
const defaultProps = {
|
|
@@ -31,7 +12,9 @@ const defaultProps = {
|
|
|
31
12
|
readonly: false,
|
|
32
13
|
disabled: false
|
|
33
14
|
};
|
|
34
|
-
const propTypes =
|
|
15
|
+
const propTypes = {
|
|
16
|
+
...globalAttributesPropTypes,
|
|
17
|
+
...xstyledPropTypes,
|
|
35
18
|
labelOn: PropTypes.string.description("Label when toggle is checked"),
|
|
36
19
|
labelOff: PropTypes.string.description("Label when toggle is unchecked"),
|
|
37
20
|
value: PropTypes.string.description("Value attribute for toggle"),
|
|
@@ -44,7 +27,7 @@ const propTypes = __spreadProps(__spreadValues(__spreadValues({}, globalAttribut
|
|
|
44
27
|
disabled: PropTypes.bool.description("Wether the toggle is disabled or not"),
|
|
45
28
|
containerProps: PropTypes.shape({}).description("Set of properties attached to the main container"),
|
|
46
29
|
id: PropTypes.string.description("Unique id.")
|
|
47
|
-
}
|
|
30
|
+
};
|
|
48
31
|
export {
|
|
49
32
|
defaultProps,
|
|
50
33
|
propTypes
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, xstyledPropTypes, PropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSControlledToggleT {\n export type ToggleSize = 's' | 'm' | 'l';\n export interface Props {\n labelOn: string;\n labelOff: string;\n name: string;\n value: string;\n checked: boolean;\n onChange: () => void | null;\n size: ToggleSize;\n readOnly: boolean;\n disabled: boolean;\n containerProps: Record<string, unknown>;\n id: string;\n }\n}\nexport const defaultProps = {\n labelOn: 'ON',\n labelOff: 'OFF',\n name: '',\n value: '',\n checked: false,\n onClick: () => null,\n size: 'm',\n readonly: false,\n disabled: false,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n labelOn: PropTypes.string.description('Label when toggle is checked'),\n labelOff: PropTypes.string.description('Label when toggle is unchecked'),\n value: PropTypes.string.description('Value attribute for toggle'),\n name: PropTypes.string.description('Name attribute for toggle'),\n checked: PropTypes.bool.description('Wether the toggle is checked or not'),\n onchange: PropTypes.func.description('OnClick callback'),\n size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle'),\n readOnly: PropTypes.bool.description('Wether the toggle is readOnly or not'),\n active: PropTypes.bool.description('Wether the toggle has active styles or not').deprecated({ version: '3.x' }),\n disabled: PropTypes.bool.description('Wether the toggle is disabled or not'),\n containerProps: PropTypes.shape({}).description('Set of properties attached to the main container'),\n id: PropTypes.string.description('Unique id.'),\n};\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAAA;ACAA;AAkBO,MAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS,MAAM;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,OAAO,YAAY,8BAA8B;AAAA,EACpE,UAAU,UAAU,OAAO,YAAY,gCAAgC;AAAA,EACvE,OAAO,UAAU,OAAO,YAAY,4BAA4B;AAAA,EAChE,MAAM,UAAU,OAAO,YAAY,2BAA2B;AAAA,EAC9D,SAAS,UAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,UAAU,KAAK,YAAY,kBAAkB;AAAA,EACvD,MAAM,UAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACnE,UAAU,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,QAAQ,UAAU,KAAK,YAAY,4CAA4C,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC9G,UAAU,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,gBAAgB,UAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAClG,IAAI,UAAU,OAAO,YAAY,YAAY;AAC/C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-toggle",
|
|
3
|
-
"version": "3.2.1-rc.
|
|
3
|
+
"version": "3.2.1-rc.7",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Toggle",
|
|
6
6
|
"files": [
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-system": "3.2.1-rc.
|
|
39
|
-
"@elliemae/ds-tooltip": "3.2.1-rc.
|
|
40
|
-
"@elliemae/ds-utilities": "3.2.1-rc.
|
|
38
|
+
"@elliemae/ds-system": "3.2.1-rc.7",
|
|
39
|
+
"@elliemae/ds-tooltip": "3.2.1-rc.7",
|
|
40
|
+
"@elliemae/ds-utilities": "3.2.1-rc.7",
|
|
41
41
|
"styled-components": "~5.3.5",
|
|
42
42
|
"uid": "~2.0.0"
|
|
43
43
|
},
|