@elliemae/ds-form-toggle 3.1.4-rc.0 → 3.1.5-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ControlledToggle.js +1 -4
- package/dist/cjs/ControlledToggle.js.map +2 -2
- package/dist/cjs/propTypes.js +13 -1
- package/dist/cjs/propTypes.js.map +2 -2
- package/dist/cjs/styles.js +3 -3
- package/dist/cjs/styles.js.map +2 -2
- package/dist/cjs/utils/styleHelpers.js +33 -34
- package/dist/cjs/utils/styleHelpers.js.map +2 -2
- package/dist/esm/ControlledToggle.js +1 -4
- package/dist/esm/ControlledToggle.js.map +2 -2
- package/dist/esm/propTypes.js +13 -1
- package/dist/esm/propTypes.js.map +2 -2
- package/dist/esm/styles.js +5 -5
- package/dist/esm/styles.js.map +2 -2
- package/dist/esm/utils/styleHelpers.js +33 -34
- package/dist/esm/utils/styleHelpers.js.map +2 -2
- package/package.json +4 -4
- package/dist/cjs/defaultProps.js +0 -39
- package/dist/cjs/defaultProps.js.map +0 -7
- package/dist/cjs/index.d.js +0 -20
- package/dist/cjs/index.d.js.map +0 -7
- package/dist/esm/defaultProps.js +0 -17
- package/dist/esm/defaultProps.js.map +0 -7
- package/dist/esm/index.d.js +0 -2
- package/dist/esm/index.d.js.map +0 -7
|
@@ -44,7 +44,6 @@ var import_uid = require("uid");
|
|
|
44
44
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
45
45
|
var import_propTypes = require("./propTypes");
|
|
46
46
|
var import_styles = require("./styles");
|
|
47
|
-
var import_defaultProps = require("./defaultProps");
|
|
48
47
|
var import_addTooltipOnReadOnly = require("./utils/addTooltipOnReadOnly");
|
|
49
48
|
const DSControlledToggle = ({
|
|
50
49
|
labelOn,
|
|
@@ -55,7 +54,6 @@ const DSControlledToggle = ({
|
|
|
55
54
|
onChange,
|
|
56
55
|
size,
|
|
57
56
|
readOnly,
|
|
58
|
-
active,
|
|
59
57
|
disabled,
|
|
60
58
|
containerProps,
|
|
61
59
|
id
|
|
@@ -113,7 +111,6 @@ const DSControlledToggle = ({
|
|
|
113
111
|
checked,
|
|
114
112
|
size,
|
|
115
113
|
readOnly,
|
|
116
|
-
active,
|
|
117
114
|
disabled,
|
|
118
115
|
htmlFor: id ? void 0 : instanceUID,
|
|
119
116
|
as: id ? "p" : "label"
|
|
@@ -133,7 +130,7 @@ const DSControlledToggle = ({
|
|
|
133
130
|
ref: widthTextRef
|
|
134
131
|
}, longerText)), readOnly);
|
|
135
132
|
};
|
|
136
|
-
DSControlledToggle.defaultProps =
|
|
133
|
+
DSControlledToggle.defaultProps = import_propTypes.defaultProps;
|
|
137
134
|
DSControlledToggle.propTypes = import_propTypes.propTypes;
|
|
138
135
|
DSControlledToggle.displayName = "DSControlledToggle";
|
|
139
136
|
const DSControlledToggleWithSchema = (0, import_ds_utilities.describe)(DSControlledToggle);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ControlledToggle.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';\nimport { uid } from 'uid';\nimport { describe } from '@elliemae/ds-utilities';\nimport { propTypes } from './propTypes';\nimport {\n StyledContainer,\n StyledInput,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyE;AACzE,iBAAoB;AACpB,0BAAyB;AACzB,
|
|
4
|
+
"sourcesContent": ["import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';\nimport { uid } from 'uid';\nimport { describe } from '@elliemae/ds-utilities';\nimport { propTypes, defaultProps, type DSControlledToggleT } from './propTypes';\nimport {\n StyledContainer,\n StyledInput,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles';\nimport { addTooltipOnReadOnly } from './utils/addTooltipOnReadOnly';\n\nconst DSControlledToggle = ({\n labelOn,\n labelOff,\n name,\n value,\n checked,\n onChange,\n size,\n readOnly,\n disabled,\n containerProps,\n id,\n}: DSControlledToggleT.Props): JSX.Element => {\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(() => uid(5), []);\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 onChange();\n }, [disabled, readOnly, onChange]);\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (disabled || readOnly) {\n e.preventDefault();\n }\n if (e.key === 'Enter') {\n e.preventDefault();\n onChange();\n }\n },\n [disabled, onChange, readOnly],\n );\n\n return addTooltipOnReadOnly(\n <StyledContainer size={size} data-testid=\"ds-controlled-toggle\" {...containerProps}>\n <StyledInput\n type=\"checkbox\"\n name={name}\n value={value}\n checked={checked}\n data-testid=\"ds-controlled-toggle-checkbox\"\n id={id || instanceUID}\n aria-disabled={disabled}\n aria-checked={checked}\n tabIndex={0}\n onChange={handleOnChange}\n onKeyDown={handleKeyDown}\n />\n <StyledLabel checked={checked} size={size} width={width}>\n <StyledVisibleContent\n checked={checked}\n size={size}\n readOnly={readOnly}\n disabled={disabled}\n htmlFor={id ? undefined : instanceUID}\n as={id ? 'p' : 'label'}\n >\n <StyledCircle checked={checked} size={size} readOnly={readOnly} disabled={disabled} />\n <StyledText\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 </StyledContainer>,\n readOnly,\n );\n};\n\nDSControlledToggle.defaultProps = defaultProps;\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyE;AACzE,iBAAoB;AACpB,0BAAyB;AACzB,uBAAkE;AAClE,oBAQO;AACP,kCAAqC;AAErC,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAC4C;AAC5C,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,oBAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,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,aAAS;AAAA,EACX,GAAG,CAAC,UAAU,UAAU,QAAQ,CAAC;AAEjC,QAAM,gBAAgB,8BACpB,CAAC,MAA2B;AAC1B,QAAI,YAAY,UAAU;AACxB,QAAE,eAAe;AAAA,IACnB;AACA,QAAI,EAAE,QAAQ,SAAS;AACrB,QAAE,eAAe;AACjB,eAAS;AAAA,IACX;AAAA,EACF,GACA,CAAC,UAAU,UAAU,QAAQ,CAC/B;AAEA,SAAO,sDACL,mDAAC;AAAA,IAAgB;AAAA,IAAY,eAAY;AAAA,KAA2B,iBAClE,mDAAC;AAAA,IACC,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ,IAAI,MAAM;AAAA,IACV,iBAAe;AAAA,IACf,gBAAc;AAAA,IACd,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,GACb,GACA,mDAAC;AAAA,IAAY;AAAA,IAAkB;AAAA,IAAY;AAAA,KACzC,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,KAAK,SAAY;AAAA,IAC1B,IAAI,KAAK,MAAM;AAAA,KAEf,mDAAC;AAAA,IAAa;AAAA,IAAkB;AAAA,IAAY;AAAA,IAAoB;AAAA,GAAoB,GACpF,mDAAC;AAAA,IACC,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;AACF;AAEA,mBAAmB,eAAe;AAClC,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
|
@@ -20,11 +20,23 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
20
20
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
21
21
|
var propTypes_exports = {};
|
|
22
22
|
__export(propTypes_exports, {
|
|
23
|
+
defaultProps: () => defaultProps,
|
|
23
24
|
propTypes: () => propTypes
|
|
24
25
|
});
|
|
25
26
|
module.exports = __toCommonJS(propTypes_exports);
|
|
26
27
|
var React = __toESM(require("react"));
|
|
27
28
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
29
|
+
const defaultProps = {
|
|
30
|
+
labelOn: "ON",
|
|
31
|
+
labelOff: "OFF",
|
|
32
|
+
name: "",
|
|
33
|
+
value: "",
|
|
34
|
+
checked: false,
|
|
35
|
+
onClick: () => null,
|
|
36
|
+
size: "m",
|
|
37
|
+
readonly: false,
|
|
38
|
+
disabled: false
|
|
39
|
+
};
|
|
28
40
|
const propTypes = {
|
|
29
41
|
labelOn: import_ds_utilities.PropTypes.string.description("Label when toggle is checked"),
|
|
30
42
|
labelOff: import_ds_utilities.PropTypes.string.description("Label when toggle is unchecked"),
|
|
@@ -34,7 +46,7 @@ const propTypes = {
|
|
|
34
46
|
onchange: import_ds_utilities.PropTypes.func.description("OnClick callback"),
|
|
35
47
|
size: import_ds_utilities.PropTypes.oneOf(["s", "m", "l"]).description("Size of toggle"),
|
|
36
48
|
readOnly: import_ds_utilities.PropTypes.bool.description("Wether the toggle is readOnly or not"),
|
|
37
|
-
active: import_ds_utilities.PropTypes.bool.description("Wether the toggle has active styles or not"),
|
|
49
|
+
active: import_ds_utilities.PropTypes.bool.description("Wether the toggle has active styles or not").deprecated({ version: "3.x" }),
|
|
38
50
|
disabled: import_ds_utilities.PropTypes.bool.description("Wether the toggle is disabled or not"),
|
|
39
51
|
containerProps: import_ds_utilities.PropTypes.shape({}).description("Set of properties attached to the main container"),
|
|
40
52
|
id: import_ds_utilities.PropTypes.string.description("Unique id.")
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { PropTypes } from '@elliemae/ds-utilities';\n\nexport const propTypes = {\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'),\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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA0B;
|
|
4
|
+
"sourcesContent": ["import { 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 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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA0B;AAkBnB,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,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
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -70,11 +70,11 @@ const StyledVisibleContent = import_ds_system.styled.label`
|
|
|
70
70
|
height: 100%;
|
|
71
71
|
flex-direction: ${({ checked }) => checked ? "row-reverse" : "row"};
|
|
72
72
|
border-radius: ${({ size }) => `calc(${import_styleHelpers.labelHeight[size]} - 4px)`};
|
|
73
|
-
border: ${(
|
|
74
|
-
2px solid ${(0, import_styleHelpers.
|
|
73
|
+
border: ${(props) => props.size === "s" ? `1px solid ${(0, import_styleHelpers.getInterpolatedBorderDsToggleColorByProps)(props)}` : `
|
|
74
|
+
2px solid ${(0, import_styleHelpers.getInterpolatedBorderDsToggleColorByProps)(props)}
|
|
75
75
|
`};
|
|
76
76
|
transition: background-color 0.2s;
|
|
77
|
-
background-color: ${
|
|
77
|
+
background-color: ${import_styleHelpers.getInterpolatedBgDsToggleColorByProps};
|
|
78
78
|
|
|
79
79
|
&:hover {
|
|
80
80
|
cursor: ${({ disabled, readOnly }) => (0, import_styleHelpers.handleCursors)(disabled, readOnly)};
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from './propTypes';\n\nimport {\n containerHeight,\n borderRadius,\n labelHeight,\n getInterpolatedBorderDsToggleColorByProps,\n getInterpolatedBgDsToggleColorByProps,\n circleValues,\n handleFontSize,\n margin,\n handleCursors,\n} from './utils/styleHelpers';\n\ninterface StyledContainerT {\n size: DSControlledToggleT.ToggleSize;\n}\ninterface StyledLabelT {\n width: number;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n}\ninterface StyledVisibleContentT {\n checked: boolean;\n size: DSControlledToggleT.ToggleSize;\n disabled: boolean;\n readOnly: boolean;\n as: 'p' | 'label';\n htmlFor: string;\n}\ninterface StyledCircleT {\n size: DSControlledToggleT.ToggleSize;\n readOnly: boolean;\n checked: boolean;\n disabled: boolean;\n}\ninterface StyledTextT {\n isLongerTextRendering: boolean;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n disabled: boolean;\n}\ninterface SetLabelWidthT {\n size: DSControlledToggleT.ToggleSize;\n}\n\nexport const StyledContainer = styled.div<StyledContainerT>`\n display: inline-flex;\n width: fit-content;\n justify-content: center;\n align-items: center;\n height: ${({ size }) => containerHeight[size]};\n border-radius: ${({ size }) => borderRadius[size]};\n outline: none;\n position: relative;\n border: 2px solid transparent;\n &:hover,\n &:focus-within {\n border: 2px solid ${({ theme }) => theme.colors.brand[300]};\n &:after {\n content: '';\n height: calc(100% + 4px);\n width: calc(100% + 4px);\n border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n border-radius: 20px;\n position: absolute;\n }\n }\n`;\n\nexport const StyledLabel = styled.div<StyledLabelT>`\n width: ${({ width, size }) => `calc(${width}px + ${margin[size]})`};\n height: ${({ size }) => labelHeight[size]};\n z-index: 2;\n outline: none;\n border-radius: ${({ size }) => labelHeight[size]};\n`;\n\nexport const StyledVisibleContent = styled.label<StyledVisibleContentT>`\n display: flex;\n margin: 0;\n padding: 0;\n align-items: center;\n height: 100%;\n flex-direction: ${({ checked }) => (checked ? 'row-reverse' : 'row')};\n border-radius: ${({ size }) => `calc(${labelHeight[size]} - 4px)`};\n border: ${(props) =>\n props.size === 's'\n ? `1px solid ${getInterpolatedBorderDsToggleColorByProps(props)}`\n : `\n 2px solid ${getInterpolatedBorderDsToggleColorByProps(props)}\n `};\n transition: background-color 0.2s;\n background-color: ${getInterpolatedBgDsToggleColorByProps};\n\n &:hover {\n cursor: ${({ disabled, readOnly }) => handleCursors(disabled, readOnly)};\n }\n`;\n\nexport const StyledCircle = styled.div<StyledCircleT>`\n height: ${({ size }) => circleValues[size]};\n width: ${({ size }) => circleValues[size]};\n border-radius: 50%;\n background-color: ${({ theme, readOnly }) => (readOnly ? theme.colors.neutral[100] : theme.colors.neutral['000'])};\n`;\n\nexport const StyledText = styled.div<StyledTextT>`\n display: flex;\n flex-grow: 1;\n line-height: 1;\n margin-bottom: -0.12rem;\n align-items: center;\n justify-content: ${({ isLongerTextRendering }) => (isLongerTextRendering ? 'flex-start' : 'center')};\n font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme, disabled }) => (disabled ? '#5c6574' : theme.colors.neutral['000'])};\n ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && checked ? `margin-left: 6px;` : undefined)}\n ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && !checked ? `margin-left: 4px;` : undefined)}\n`;\n\nexport const StyledInput = styled.input`\n position: absolute;\n opacity: 0;\n z-index: 20;\n height: 100%;\n width: 100%;\n cursor: pointer;\n`;\n\nexport const SetLabelWidth = styled.div<SetLabelWidthT>`\n font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n width: auto;\n position: absolute;\n white-space: nowrap;\n visibility: hidden;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAGvB,0BAUO;AAkCA,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAK1B,CAAC,EAAE,WAAW,oCAAgB;AAAA,mBACvB,CAAC,EAAE,WAAW,iCAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMtB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKhC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,cAAc,wBAAO;AAAA,WACvB,CAAC,EAAE,OAAO,WAAW,QAAQ,aAAa,2BAAO;AAAA,YAChD,CAAC,EAAE,WAAW,gCAAY;AAAA;AAAA;AAAA,mBAGnB,CAAC,EAAE,WAAW,gCAAY;AAAA;AAGtC,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMvB,CAAC,EAAE,cAAe,UAAU,gBAAgB;AAAA,mBAC7C,CAAC,EAAE,WAAW,QAAQ,gCAAY;AAAA,YACzC,CAAC,UACT,MAAM,SAAS,MACX,aAAa,mEAA0C,KAAK,MAC5D;AAAA,gBACQ,mEAA0C,KAAK;AAAA;AAAA;AAAA,sBAGzC;AAAA;AAAA;AAAA,cAGR,CAAC,EAAE,UAAU,eAAe,uCAAc,UAAU,QAAQ;AAAA;AAAA;AAInE,MAAM,eAAe,wBAAO;AAAA,YACvB,CAAC,EAAE,WAAW,iCAAa;AAAA,WAC5B,CAAC,EAAE,WAAW,iCAAa;AAAA;AAAA,sBAEhB,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAGrG,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMZ,CAAC,EAAE,4BAA6B,wBAAwB,eAAe;AAAA,eAC7E,CAAC,EAAE,OAAO,WAAW,wCAAe,MAAM,KAAK;AAAA,iBAC7C,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,OAAO,eAAgB,WAAW,YAAY,MAAM,OAAO,QAAQ;AAAA,IAC7E,CAAC,EAAE,uBAAuB,cAAe,yBAAyB,UAAU,sBAAsB;AAAA,IAClG,CAAC,EAAE,uBAAuB,cAAe,yBAAyB,CAAC,UAAU,sBAAsB;AAAA;AAGhG,MAAM,cAAc,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,gBAAgB,wBAAO;AAAA,eACrB,CAAC,EAAE,OAAO,WAAW,wCAAe,MAAM,KAAK;AAAA,iBAC7C,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -23,8 +23,8 @@ __export(styleHelpers_exports, {
|
|
|
23
23
|
borderRadius: () => borderRadius,
|
|
24
24
|
circleValues: () => circleValues,
|
|
25
25
|
containerHeight: () => containerHeight,
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
getInterpolatedBgDsToggleColorByProps: () => getInterpolatedBgDsToggleColorByProps,
|
|
27
|
+
getInterpolatedBorderDsToggleColorByProps: () => getInterpolatedBorderDsToggleColorByProps,
|
|
28
28
|
handleCursors: () => handleCursors,
|
|
29
29
|
handleFontSize: () => handleFontSize,
|
|
30
30
|
labelHeight: () => labelHeight,
|
|
@@ -32,6 +32,20 @@ __export(styleHelpers_exports, {
|
|
|
32
32
|
});
|
|
33
33
|
module.exports = __toCommonJS(styleHelpers_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
36
|
+
const getStyleState = ({
|
|
37
|
+
checked,
|
|
38
|
+
disabled,
|
|
39
|
+
readOnly
|
|
40
|
+
}) => {
|
|
41
|
+
if (disabled)
|
|
42
|
+
return "disabled";
|
|
43
|
+
if (readOnly)
|
|
44
|
+
return "readOnly";
|
|
45
|
+
if (checked)
|
|
46
|
+
return "checked";
|
|
47
|
+
return "unchecked";
|
|
48
|
+
};
|
|
35
49
|
const circleValues = {
|
|
36
50
|
s: "14px",
|
|
37
51
|
m: "20px",
|
|
@@ -69,42 +83,27 @@ const handleFontSize = (size, { fontSizes }) => {
|
|
|
69
83
|
return "15px";
|
|
70
84
|
}
|
|
71
85
|
};
|
|
72
|
-
const
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
} else if (!active && checked) {
|
|
78
|
-
return colors.brand[600];
|
|
79
|
-
} else if (!active && !checked) {
|
|
80
|
-
return colors.neutral[500];
|
|
81
|
-
} else if (active && checked) {
|
|
82
|
-
return colors.brand[700];
|
|
83
|
-
} else if (active && !checked) {
|
|
84
|
-
return colors.neutral[600];
|
|
85
|
-
}
|
|
86
|
+
const bgColorsMap = {
|
|
87
|
+
disabled: "neutral-100",
|
|
88
|
+
readOnly: "neutral-500",
|
|
89
|
+
checked: "brand-600",
|
|
90
|
+
unchecked: "neutral-500"
|
|
86
91
|
};
|
|
87
|
-
const
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
} else if (!active && !checked) {
|
|
95
|
-
return colors.neutral[500];
|
|
96
|
-
} else if (active && checked) {
|
|
97
|
-
return colors.brand[800];
|
|
98
|
-
} else if (active && !checked) {
|
|
99
|
-
return colors.neutral[700];
|
|
100
|
-
}
|
|
92
|
+
const getInterpolatedBgDSToggleColor = (styleState, props) => import_ds_system.th.color(bgColorsMap[styleState])(props);
|
|
93
|
+
const getInterpolatedBgDsToggleColorByProps = (props) => getInterpolatedBgDSToggleColor(getStyleState(props), props);
|
|
94
|
+
const borderColorsMap = {
|
|
95
|
+
disabled: "neutral-300",
|
|
96
|
+
readOnly: "neutral-500",
|
|
97
|
+
checked: "brand-700",
|
|
98
|
+
unchecked: "neutral-600"
|
|
101
99
|
};
|
|
100
|
+
const getInterpolatedBorderDSToggleColor = (styleState, props) => import_ds_system.th.color(borderColorsMap[styleState])(props);
|
|
101
|
+
const getInterpolatedBorderDsToggleColorByProps = (props) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);
|
|
102
102
|
const handleCursors = (disabled, readOnly) => {
|
|
103
|
-
if (disabled)
|
|
103
|
+
if (disabled)
|
|
104
104
|
return "not-allowed";
|
|
105
|
-
|
|
105
|
+
if (readOnly)
|
|
106
106
|
return "default";
|
|
107
|
-
|
|
108
|
-
return "pointer";
|
|
107
|
+
return "pointer";
|
|
109
108
|
};
|
|
110
109
|
//# sourceMappingURL=styleHelpers.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/styleHelpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { th, type PropsWithTheme } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from '../propTypes';\n\ntype StyleStateT = 'disabled' | 'readOnly' | 'checked' | 'unchecked';\n\nconst getStyleState = ({\n checked,\n disabled,\n readOnly,\n}: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n readOnly: boolean;\n}>): StyleStateT => {\n if (disabled) return 'disabled';\n if (readOnly) return 'readOnly';\n if (checked) return 'checked';\n return 'unchecked';\n};\n\nexport const circleValues = {\n s: '14px',\n m: '20px',\n l: '28px',\n};\n\nexport const margin = {\n s: '26px',\n m: '34px',\n l: '42px',\n};\n\nexport const containerHeight = {\n s: '20px',\n m: '28px',\n l: '36px',\n};\n\nexport const labelHeight = {\n s: '16px',\n m: '24px',\n l: '32px',\n};\n\nexport const borderRadius = {\n s: '16px',\n m: '20px',\n l: '22px',\n};\nexport const handleFontSize = (\n size: DSControlledToggleT.ToggleSize,\n { fontSizes }: PropsWithTheme['theme'],\n): string => {\n switch (size) {\n case 's':\n return fontSizes.microText[200];\n case 'm':\n return '15px';\n case 'l':\n return '20px';\n default:\n return '15px';\n }\n};\nconst bgColorsMap = {\n disabled: 'neutral-100',\n readOnly: 'neutral-500',\n checked: 'brand-600',\n unchecked: 'neutral-500',\n} as const;\nconst getInterpolatedBgDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n th.color(bgColorsMap[styleState])(props);\nexport const getInterpolatedBgDsToggleColorByProps = (\n props: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n readOnly: boolean;\n }>,\n) => getInterpolatedBgDSToggleColor(getStyleState(props), props);\n\nconst borderColorsMap = {\n disabled: 'neutral-300',\n readOnly: 'neutral-500',\n checked: 'brand-700',\n unchecked: 'neutral-600',\n} as const;\nconst getInterpolatedBorderDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n th.color(borderColorsMap[styleState])(props);\nexport const getInterpolatedBorderDsToggleColorByProps = (\n props: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n readOnly: boolean;\n }>,\n) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);\n\nexport const handleCursors = (disabled: boolean, readOnly: boolean): string => {\n if (disabled) return 'not-allowed';\n if (readOnly) return 'default';\n return 'pointer';\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAKxC,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,MAKkB;AAClB,MAAI;AAAU,WAAO;AACrB,MAAI;AAAU,WAAO;AACrB,MAAI;AAAS,WAAO;AACpB,SAAO;AACT;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,kBAAkB;AAAA,EAC7B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,cAAc;AAAA,EACzB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACO,MAAM,iBAAiB,CAC5B,MACA,EAAE,gBACS;AACX,UAAQ;AAAA,SACD;AACH,aAAO,UAAU,UAAU;AAAA,SACxB;AACH,aAAO;AAAA,SACJ;AACH,aAAO;AAAA;AAEP,aAAO;AAAA;AAEb;AACA,MAAM,cAAc;AAAA,EAClB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AACA,MAAM,iCAAiC,CAAC,YAAyB,UAC/D,oBAAG,MAAM,YAAY,WAAW,EAAE,KAAK;AAClC,MAAM,wCAAwC,CACnD,UAKG,+BAA+B,cAAc,KAAK,GAAG,KAAK;AAE/D,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AACA,MAAM,qCAAqC,CAAC,YAAyB,UACnE,oBAAG,MAAM,gBAAgB,WAAW,EAAE,KAAK;AACtC,MAAM,4CAA4C,CACvD,UAKG,mCAAmC,cAAc,KAAK,GAAG,KAAK;AAE5D,MAAM,gBAAgB,CAAC,UAAmB,aAA8B;AAC7E,MAAI;AAAU,WAAO;AACrB,MAAI;AAAU,WAAO;AACrB,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,7 +18,7 @@ import * as React from "react";
|
|
|
18
18
|
import React2, { useState, useMemo, useRef, useEffect, useCallback } from "react";
|
|
19
19
|
import { uid } from "uid";
|
|
20
20
|
import { describe } from "@elliemae/ds-utilities";
|
|
21
|
-
import { propTypes } from "./propTypes";
|
|
21
|
+
import { propTypes, defaultProps } from "./propTypes";
|
|
22
22
|
import {
|
|
23
23
|
StyledContainer,
|
|
24
24
|
StyledInput,
|
|
@@ -28,7 +28,6 @@ import {
|
|
|
28
28
|
StyledText,
|
|
29
29
|
SetLabelWidth
|
|
30
30
|
} from "./styles";
|
|
31
|
-
import { defaultProps } from "./defaultProps";
|
|
32
31
|
import { addTooltipOnReadOnly } from "./utils/addTooltipOnReadOnly";
|
|
33
32
|
const DSControlledToggle = ({
|
|
34
33
|
labelOn,
|
|
@@ -39,7 +38,6 @@ const DSControlledToggle = ({
|
|
|
39
38
|
onChange,
|
|
40
39
|
size,
|
|
41
40
|
readOnly,
|
|
42
|
-
active,
|
|
43
41
|
disabled,
|
|
44
42
|
containerProps,
|
|
45
43
|
id
|
|
@@ -97,7 +95,6 @@ const DSControlledToggle = ({
|
|
|
97
95
|
checked,
|
|
98
96
|
size,
|
|
99
97
|
readOnly,
|
|
100
|
-
active,
|
|
101
98
|
disabled,
|
|
102
99
|
htmlFor: id ? void 0 : instanceUID,
|
|
103
100
|
as: id ? "p" : "label"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledToggle.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';\nimport { uid } from 'uid';\nimport { describe } from '@elliemae/ds-utilities';\nimport { propTypes } from './propTypes';\nimport {\n StyledContainer,\n StyledInput,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;AAEA
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';\nimport { uid } from 'uid';\nimport { describe } from '@elliemae/ds-utilities';\nimport { propTypes, defaultProps, type DSControlledToggleT } from './propTypes';\nimport {\n StyledContainer,\n StyledInput,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles';\nimport { addTooltipOnReadOnly } from './utils/addTooltipOnReadOnly';\n\nconst DSControlledToggle = ({\n labelOn,\n labelOff,\n name,\n value,\n checked,\n onChange,\n size,\n readOnly,\n disabled,\n containerProps,\n id,\n}: DSControlledToggleT.Props): JSX.Element => {\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(() => uid(5), []);\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 onChange();\n }, [disabled, readOnly, onChange]);\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (disabled || readOnly) {\n e.preventDefault();\n }\n if (e.key === 'Enter') {\n e.preventDefault();\n onChange();\n }\n },\n [disabled, onChange, readOnly],\n );\n\n return addTooltipOnReadOnly(\n <StyledContainer size={size} data-testid=\"ds-controlled-toggle\" {...containerProps}>\n <StyledInput\n type=\"checkbox\"\n name={name}\n value={value}\n checked={checked}\n data-testid=\"ds-controlled-toggle-checkbox\"\n id={id || instanceUID}\n aria-disabled={disabled}\n aria-checked={checked}\n tabIndex={0}\n onChange={handleOnChange}\n onKeyDown={handleKeyDown}\n />\n <StyledLabel checked={checked} size={size} width={width}>\n <StyledVisibleContent\n checked={checked}\n size={size}\n readOnly={readOnly}\n disabled={disabled}\n htmlFor={id ? undefined : instanceUID}\n as={id ? 'p' : 'label'}\n >\n <StyledCircle checked={checked} size={size} readOnly={readOnly} disabled={disabled} />\n <StyledText\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 </StyledContainer>,\n readOnly,\n );\n};\n\nDSControlledToggle.defaultProps = defaultProps;\nDSControlledToggle.propTypes = propTypes;\nDSControlledToggle.displayName = 'DSControlledToggle';\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = propTypes;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;AAEA,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAC4C;AAC5C,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,IAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,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,aAAS;AAAA,EACX,GAAG,CAAC,UAAU,UAAU,QAAQ,CAAC;AAEjC,QAAM,gBAAgB,YACpB,CAAC,MAA2B;AAC1B,QAAI,YAAY,UAAU;AACxB,QAAE,eAAe;AAAA,IACnB;AACA,QAAI,EAAE,QAAQ,SAAS;AACrB,QAAE,eAAe;AACjB,eAAS;AAAA,IACX;AAAA,EACF,GACA,CAAC,UAAU,UAAU,QAAQ,CAC/B;AAEA,SAAO,qBACL,qCAAC;AAAA,IAAgB;AAAA,IAAY,eAAY;AAAA,KAA2B,iBAClE,qCAAC;AAAA,IACC,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ,IAAI,MAAM;AAAA,IACV,iBAAe;AAAA,IACf,gBAAc;AAAA,IACd,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,GACb,GACA,qCAAC;AAAA,IAAY;AAAA,IAAkB;AAAA,IAAY;AAAA,KACzC,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,KAAK,SAAY;AAAA,IAC1B,IAAI,KAAK,MAAM;AAAA,KAEf,qCAAC;AAAA,IAAa;AAAA,IAAkB;AAAA,IAAY;AAAA,IAAoB;AAAA,GAAoB,GACpF,qCAAC;AAAA,IACC,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;AACF;AAEA,mBAAmB,eAAe;AAClC,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,5 +1,16 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { PropTypes } from "@elliemae/ds-utilities";
|
|
3
|
+
const defaultProps = {
|
|
4
|
+
labelOn: "ON",
|
|
5
|
+
labelOff: "OFF",
|
|
6
|
+
name: "",
|
|
7
|
+
value: "",
|
|
8
|
+
checked: false,
|
|
9
|
+
onClick: () => null,
|
|
10
|
+
size: "m",
|
|
11
|
+
readonly: false,
|
|
12
|
+
disabled: false
|
|
13
|
+
};
|
|
3
14
|
const propTypes = {
|
|
4
15
|
labelOn: PropTypes.string.description("Label when toggle is checked"),
|
|
5
16
|
labelOff: PropTypes.string.description("Label when toggle is unchecked"),
|
|
@@ -9,12 +20,13 @@ const propTypes = {
|
|
|
9
20
|
onchange: PropTypes.func.description("OnClick callback"),
|
|
10
21
|
size: PropTypes.oneOf(["s", "m", "l"]).description("Size of toggle"),
|
|
11
22
|
readOnly: PropTypes.bool.description("Wether the toggle is readOnly or not"),
|
|
12
|
-
active: PropTypes.bool.description("Wether the toggle has active styles or not"),
|
|
23
|
+
active: PropTypes.bool.description("Wether the toggle has active styles or not").deprecated({ version: "3.x" }),
|
|
13
24
|
disabled: PropTypes.bool.description("Wether the toggle is disabled or not"),
|
|
14
25
|
containerProps: PropTypes.shape({}).description("Set of properties attached to the main container"),
|
|
15
26
|
id: PropTypes.string.description("Unique id.")
|
|
16
27
|
};
|
|
17
28
|
export {
|
|
29
|
+
defaultProps,
|
|
18
30
|
propTypes
|
|
19
31
|
};
|
|
20
32
|
//# sourceMappingURL=propTypes.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\n\nexport const propTypes = {\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'),\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": "AAAA;ACAA;AAEO,MAAM,YAAY;AAAA,EACvB,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;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { 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 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": "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,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/dist/esm/styles.js
CHANGED
|
@@ -4,8 +4,8 @@ import {
|
|
|
4
4
|
containerHeight,
|
|
5
5
|
borderRadius,
|
|
6
6
|
labelHeight,
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
getInterpolatedBorderDsToggleColorByProps,
|
|
8
|
+
getInterpolatedBgDsToggleColorByProps,
|
|
9
9
|
circleValues,
|
|
10
10
|
handleFontSize,
|
|
11
11
|
margin,
|
|
@@ -49,11 +49,11 @@ const StyledVisibleContent = styled.label`
|
|
|
49
49
|
height: 100%;
|
|
50
50
|
flex-direction: ${({ checked }) => checked ? "row-reverse" : "row"};
|
|
51
51
|
border-radius: ${({ size }) => `calc(${labelHeight[size]} - 4px)`};
|
|
52
|
-
border: ${(
|
|
53
|
-
2px solid ${
|
|
52
|
+
border: ${(props) => props.size === "s" ? `1px solid ${getInterpolatedBorderDsToggleColorByProps(props)}` : `
|
|
53
|
+
2px solid ${getInterpolatedBorderDsToggleColorByProps(props)}
|
|
54
54
|
`};
|
|
55
55
|
transition: background-color 0.2s;
|
|
56
|
-
background-color: ${
|
|
56
|
+
background-color: ${getInterpolatedBgDsToggleColorByProps};
|
|
57
57
|
|
|
58
58
|
&:hover {
|
|
59
59
|
cursor: ${({ disabled, readOnly }) => handleCursors(disabled, readOnly)};
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type {
|
|
5
|
-
"mappings": "AAAA;ACAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from './propTypes';\n\nimport {\n containerHeight,\n borderRadius,\n labelHeight,\n getInterpolatedBorderDsToggleColorByProps,\n getInterpolatedBgDsToggleColorByProps,\n circleValues,\n handleFontSize,\n margin,\n handleCursors,\n} from './utils/styleHelpers';\n\ninterface StyledContainerT {\n size: DSControlledToggleT.ToggleSize;\n}\ninterface StyledLabelT {\n width: number;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n}\ninterface StyledVisibleContentT {\n checked: boolean;\n size: DSControlledToggleT.ToggleSize;\n disabled: boolean;\n readOnly: boolean;\n as: 'p' | 'label';\n htmlFor: string;\n}\ninterface StyledCircleT {\n size: DSControlledToggleT.ToggleSize;\n readOnly: boolean;\n checked: boolean;\n disabled: boolean;\n}\ninterface StyledTextT {\n isLongerTextRendering: boolean;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n disabled: boolean;\n}\ninterface SetLabelWidthT {\n size: DSControlledToggleT.ToggleSize;\n}\n\nexport const StyledContainer = styled.div<StyledContainerT>`\n display: inline-flex;\n width: fit-content;\n justify-content: center;\n align-items: center;\n height: ${({ size }) => containerHeight[size]};\n border-radius: ${({ size }) => borderRadius[size]};\n outline: none;\n position: relative;\n border: 2px solid transparent;\n &:hover,\n &:focus-within {\n border: 2px solid ${({ theme }) => theme.colors.brand[300]};\n &:after {\n content: '';\n height: calc(100% + 4px);\n width: calc(100% + 4px);\n border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n border-radius: 20px;\n position: absolute;\n }\n }\n`;\n\nexport const StyledLabel = styled.div<StyledLabelT>`\n width: ${({ width, size }) => `calc(${width}px + ${margin[size]})`};\n height: ${({ size }) => labelHeight[size]};\n z-index: 2;\n outline: none;\n border-radius: ${({ size }) => labelHeight[size]};\n`;\n\nexport const StyledVisibleContent = styled.label<StyledVisibleContentT>`\n display: flex;\n margin: 0;\n padding: 0;\n align-items: center;\n height: 100%;\n flex-direction: ${({ checked }) => (checked ? 'row-reverse' : 'row')};\n border-radius: ${({ size }) => `calc(${labelHeight[size]} - 4px)`};\n border: ${(props) =>\n props.size === 's'\n ? `1px solid ${getInterpolatedBorderDsToggleColorByProps(props)}`\n : `\n 2px solid ${getInterpolatedBorderDsToggleColorByProps(props)}\n `};\n transition: background-color 0.2s;\n background-color: ${getInterpolatedBgDsToggleColorByProps};\n\n &:hover {\n cursor: ${({ disabled, readOnly }) => handleCursors(disabled, readOnly)};\n }\n`;\n\nexport const StyledCircle = styled.div<StyledCircleT>`\n height: ${({ size }) => circleValues[size]};\n width: ${({ size }) => circleValues[size]};\n border-radius: 50%;\n background-color: ${({ theme, readOnly }) => (readOnly ? theme.colors.neutral[100] : theme.colors.neutral['000'])};\n`;\n\nexport const StyledText = styled.div<StyledTextT>`\n display: flex;\n flex-grow: 1;\n line-height: 1;\n margin-bottom: -0.12rem;\n align-items: center;\n justify-content: ${({ isLongerTextRendering }) => (isLongerTextRendering ? 'flex-start' : 'center')};\n font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme, disabled }) => (disabled ? '#5c6574' : theme.colors.neutral['000'])};\n ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && checked ? `margin-left: 6px;` : undefined)}\n ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && !checked ? `margin-left: 4px;` : undefined)}\n`;\n\nexport const StyledInput = styled.input`\n position: absolute;\n opacity: 0;\n z-index: 20;\n height: 100%;\n width: 100%;\n cursor: pointer;\n`;\n\nexport const SetLabelWidth = styled.div<SetLabelWidthT>`\n font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n width: auto;\n position: absolute;\n white-space: nowrap;\n visibility: hidden;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4CO,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAK1B,CAAC,EAAE,WAAW,gBAAgB;AAAA,mBACvB,CAAC,EAAE,WAAW,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMtB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKhC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,cAAc,OAAO;AAAA,WACvB,CAAC,EAAE,OAAO,WAAW,QAAQ,aAAa,OAAO;AAAA,YAChD,CAAC,EAAE,WAAW,YAAY;AAAA;AAAA;AAAA,mBAGnB,CAAC,EAAE,WAAW,YAAY;AAAA;AAGtC,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMvB,CAAC,EAAE,cAAe,UAAU,gBAAgB;AAAA,mBAC7C,CAAC,EAAE,WAAW,QAAQ,YAAY;AAAA,YACzC,CAAC,UACT,MAAM,SAAS,MACX,aAAa,0CAA0C,KAAK,MAC5D;AAAA,gBACQ,0CAA0C,KAAK;AAAA;AAAA;AAAA,sBAGzC;AAAA;AAAA;AAAA,cAGR,CAAC,EAAE,UAAU,eAAe,cAAc,UAAU,QAAQ;AAAA;AAAA;AAInE,MAAM,eAAe,OAAO;AAAA,YACvB,CAAC,EAAE,WAAW,aAAa;AAAA,WAC5B,CAAC,EAAE,WAAW,aAAa;AAAA;AAAA,sBAEhB,CAAC,EAAE,OAAO,eAAgB,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAGrG,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMZ,CAAC,EAAE,4BAA6B,wBAAwB,eAAe;AAAA,eAC7E,CAAC,EAAE,OAAO,WAAW,eAAe,MAAM,KAAK;AAAA,iBAC7C,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,OAAO,eAAgB,WAAW,YAAY,MAAM,OAAO,QAAQ;AAAA,IAC7E,CAAC,EAAE,uBAAuB,cAAe,yBAAyB,UAAU,sBAAsB;AAAA,IAClG,CAAC,EAAE,uBAAuB,cAAe,yBAAyB,CAAC,UAAU,sBAAsB;AAAA;AAGhG,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS3B,MAAM,gBAAgB,OAAO;AAAA,eACrB,CAAC,EAAE,OAAO,WAAW,eAAe,MAAM,KAAK;AAAA,iBAC7C,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,18 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { th } from "@elliemae/ds-system";
|
|
3
|
+
const getStyleState = ({
|
|
4
|
+
checked,
|
|
5
|
+
disabled,
|
|
6
|
+
readOnly
|
|
7
|
+
}) => {
|
|
8
|
+
if (disabled)
|
|
9
|
+
return "disabled";
|
|
10
|
+
if (readOnly)
|
|
11
|
+
return "readOnly";
|
|
12
|
+
if (checked)
|
|
13
|
+
return "checked";
|
|
14
|
+
return "unchecked";
|
|
15
|
+
};
|
|
2
16
|
const circleValues = {
|
|
3
17
|
s: "14px",
|
|
4
18
|
m: "20px",
|
|
@@ -36,50 +50,35 @@ const handleFontSize = (size, { fontSizes }) => {
|
|
|
36
50
|
return "15px";
|
|
37
51
|
}
|
|
38
52
|
};
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
} else if (!active && checked) {
|
|
45
|
-
return colors.brand[600];
|
|
46
|
-
} else if (!active && !checked) {
|
|
47
|
-
return colors.neutral[500];
|
|
48
|
-
} else if (active && checked) {
|
|
49
|
-
return colors.brand[700];
|
|
50
|
-
} else if (active && !checked) {
|
|
51
|
-
return colors.neutral[600];
|
|
52
|
-
}
|
|
53
|
+
const bgColorsMap = {
|
|
54
|
+
disabled: "neutral-100",
|
|
55
|
+
readOnly: "neutral-500",
|
|
56
|
+
checked: "brand-600",
|
|
57
|
+
unchecked: "neutral-500"
|
|
53
58
|
};
|
|
54
|
-
const
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
} else if (!active && !checked) {
|
|
62
|
-
return colors.neutral[500];
|
|
63
|
-
} else if (active && checked) {
|
|
64
|
-
return colors.brand[800];
|
|
65
|
-
} else if (active && !checked) {
|
|
66
|
-
return colors.neutral[700];
|
|
67
|
-
}
|
|
59
|
+
const getInterpolatedBgDSToggleColor = (styleState, props) => th.color(bgColorsMap[styleState])(props);
|
|
60
|
+
const getInterpolatedBgDsToggleColorByProps = (props) => getInterpolatedBgDSToggleColor(getStyleState(props), props);
|
|
61
|
+
const borderColorsMap = {
|
|
62
|
+
disabled: "neutral-300",
|
|
63
|
+
readOnly: "neutral-500",
|
|
64
|
+
checked: "brand-700",
|
|
65
|
+
unchecked: "neutral-600"
|
|
68
66
|
};
|
|
67
|
+
const getInterpolatedBorderDSToggleColor = (styleState, props) => th.color(borderColorsMap[styleState])(props);
|
|
68
|
+
const getInterpolatedBorderDsToggleColorByProps = (props) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);
|
|
69
69
|
const handleCursors = (disabled, readOnly) => {
|
|
70
|
-
if (disabled)
|
|
70
|
+
if (disabled)
|
|
71
71
|
return "not-allowed";
|
|
72
|
-
|
|
72
|
+
if (readOnly)
|
|
73
73
|
return "default";
|
|
74
|
-
|
|
75
|
-
return "pointer";
|
|
74
|
+
return "pointer";
|
|
76
75
|
};
|
|
77
76
|
export {
|
|
78
77
|
borderRadius,
|
|
79
78
|
circleValues,
|
|
80
79
|
containerHeight,
|
|
81
|
-
|
|
82
|
-
|
|
80
|
+
getInterpolatedBgDsToggleColorByProps,
|
|
81
|
+
getInterpolatedBorderDsToggleColorByProps,
|
|
83
82
|
handleCursors,
|
|
84
83
|
handleFontSize,
|
|
85
84
|
labelHeight,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {
|
|
5
|
-
"mappings": "AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { th, type PropsWithTheme } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from '../propTypes';\n\ntype StyleStateT = 'disabled' | 'readOnly' | 'checked' | 'unchecked';\n\nconst getStyleState = ({\n checked,\n disabled,\n readOnly,\n}: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n readOnly: boolean;\n}>): StyleStateT => {\n if (disabled) return 'disabled';\n if (readOnly) return 'readOnly';\n if (checked) return 'checked';\n return 'unchecked';\n};\n\nexport const circleValues = {\n s: '14px',\n m: '20px',\n l: '28px',\n};\n\nexport const margin = {\n s: '26px',\n m: '34px',\n l: '42px',\n};\n\nexport const containerHeight = {\n s: '20px',\n m: '28px',\n l: '36px',\n};\n\nexport const labelHeight = {\n s: '16px',\n m: '24px',\n l: '32px',\n};\n\nexport const borderRadius = {\n s: '16px',\n m: '20px',\n l: '22px',\n};\nexport const handleFontSize = (\n size: DSControlledToggleT.ToggleSize,\n { fontSizes }: PropsWithTheme['theme'],\n): string => {\n switch (size) {\n case 's':\n return fontSizes.microText[200];\n case 'm':\n return '15px';\n case 'l':\n return '20px';\n default:\n return '15px';\n }\n};\nconst bgColorsMap = {\n disabled: 'neutral-100',\n readOnly: 'neutral-500',\n checked: 'brand-600',\n unchecked: 'neutral-500',\n} as const;\nconst getInterpolatedBgDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n th.color(bgColorsMap[styleState])(props);\nexport const getInterpolatedBgDsToggleColorByProps = (\n props: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n readOnly: boolean;\n }>,\n) => getInterpolatedBgDSToggleColor(getStyleState(props), props);\n\nconst borderColorsMap = {\n disabled: 'neutral-300',\n readOnly: 'neutral-500',\n checked: 'brand-700',\n unchecked: 'neutral-600',\n} as const;\nconst getInterpolatedBorderDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n th.color(borderColorsMap[styleState])(props);\nexport const getInterpolatedBorderDsToggleColorByProps = (\n props: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n readOnly: boolean;\n }>,\n) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);\n\nexport const handleCursors = (disabled: boolean, readOnly: boolean): string => {\n if (disabled) return 'not-allowed';\n if (readOnly) return 'default';\n return 'pointer';\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAKA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,MAKkB;AAClB,MAAI;AAAU,WAAO;AACrB,MAAI;AAAU,WAAO;AACrB,MAAI;AAAS,WAAO;AACpB,SAAO;AACT;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,kBAAkB;AAAA,EAC7B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,cAAc;AAAA,EACzB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACO,MAAM,iBAAiB,CAC5B,MACA,EAAE,gBACS;AACX,UAAQ;AAAA,SACD;AACH,aAAO,UAAU,UAAU;AAAA,SACxB;AACH,aAAO;AAAA,SACJ;AACH,aAAO;AAAA;AAEP,aAAO;AAAA;AAEb;AACA,MAAM,cAAc;AAAA,EAClB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AACA,MAAM,iCAAiC,CAAC,YAAyB,UAC/D,GAAG,MAAM,YAAY,WAAW,EAAE,KAAK;AAClC,MAAM,wCAAwC,CACnD,UAKG,+BAA+B,cAAc,KAAK,GAAG,KAAK;AAE/D,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AACA,MAAM,qCAAqC,CAAC,YAAyB,UACnE,GAAG,MAAM,gBAAgB,WAAW,EAAE,KAAK;AACtC,MAAM,4CAA4C,CACvD,UAKG,mCAAmC,cAAc,KAAK,GAAG,KAAK;AAE5D,MAAM,gBAAgB,CAAC,UAAmB,aAA8B;AAC7E,MAAI;AAAU,WAAO;AACrB,MAAI;AAAU,WAAO;AACrB,SAAO;AACT;",
|
|
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.1.
|
|
3
|
+
"version": "3.1.5-rc.2",
|
|
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.1.
|
|
39
|
-
"@elliemae/ds-tooltip": "3.1.
|
|
40
|
-
"@elliemae/ds-utilities": "3.1.
|
|
38
|
+
"@elliemae/ds-system": "3.1.5-rc.2",
|
|
39
|
+
"@elliemae/ds-tooltip": "3.1.5-rc.2",
|
|
40
|
+
"@elliemae/ds-utilities": "3.1.5-rc.2",
|
|
41
41
|
"styled-components": "~5.3.3",
|
|
42
42
|
"uid": "~2.0.0"
|
|
43
43
|
},
|
package/dist/cjs/defaultProps.js
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __export = (target, all) => {
|
|
8
|
-
for (var name in all)
|
|
9
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
-
};
|
|
11
|
-
var __copyProps = (to, from, except, desc) => {
|
|
12
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
-
for (let key of __getOwnPropNames(from))
|
|
14
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
-
}
|
|
17
|
-
return to;
|
|
18
|
-
};
|
|
19
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
20
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
21
|
-
var defaultProps_exports = {};
|
|
22
|
-
__export(defaultProps_exports, {
|
|
23
|
-
defaultProps: () => defaultProps
|
|
24
|
-
});
|
|
25
|
-
module.exports = __toCommonJS(defaultProps_exports);
|
|
26
|
-
var React = __toESM(require("react"));
|
|
27
|
-
const defaultProps = {
|
|
28
|
-
labelOn: "ON",
|
|
29
|
-
labelOff: "OFF",
|
|
30
|
-
name: "",
|
|
31
|
-
value: "",
|
|
32
|
-
checked: false,
|
|
33
|
-
onClick: () => null,
|
|
34
|
-
size: "m",
|
|
35
|
-
readonly: false,
|
|
36
|
-
active: false,
|
|
37
|
-
disabled: false
|
|
38
|
-
};
|
|
39
|
-
//# sourceMappingURL=defaultProps.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/defaultProps.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export 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 active: false,\n disabled: false,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,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,QAAQ;AAAA,EACR,UAAU;AACZ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/cjs/index.d.js
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __copyProps = (to, from, except, desc) => {
|
|
8
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
9
|
-
for (let key of __getOwnPropNames(from))
|
|
10
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
11
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
12
|
-
}
|
|
13
|
-
return to;
|
|
14
|
-
};
|
|
15
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
16
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
17
|
-
var index_d_exports = {};
|
|
18
|
-
module.exports = __toCommonJS(index_d_exports);
|
|
19
|
-
var React = __toESM(require("react"));
|
|
20
|
-
//# sourceMappingURL=index.d.js.map
|
package/dist/cjs/index.d.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/index.d.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export type ToggleSize = 's' | 'm' | 'l';\n\nexport interface DSControlledTogglePropsT {\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 active: boolean;\n disabled: boolean;\n containerProps: Record<string, unknown>;\n id: string;\n}\n\nexport interface StyledContainerT {\n size: ToggleSize;\n}\n\nexport interface StyledLabelT {\n width: number;\n size: ToggleSize;\n checked: boolean;\n}\n\nexport interface StyledVisibleContentT {\n checked: boolean;\n size: ToggleSize;\n disabled: boolean;\n readOnly: boolean;\n active: boolean;\n as: 'p' | 'label';\n htmlFor: string;\n}\n\nexport interface StyledCircleT {\n size: ToggleSize;\n readOnly: boolean;\n checked: boolean;\n disabled: boolean;\n}\n\nexport interface StyledTextT {\n isLongerTextRendering: boolean;\n size: ToggleSize;\n checked: boolean;\n disabled: boolean;\n}\n\nexport interface SetLabelWidthT {\n size: ToggleSize;\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/defaultProps.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
const defaultProps = {
|
|
3
|
-
labelOn: "ON",
|
|
4
|
-
labelOff: "OFF",
|
|
5
|
-
name: "",
|
|
6
|
-
value: "",
|
|
7
|
-
checked: false,
|
|
8
|
-
onClick: () => null,
|
|
9
|
-
size: "m",
|
|
10
|
-
readonly: false,
|
|
11
|
-
active: false,
|
|
12
|
-
disabled: false
|
|
13
|
-
};
|
|
14
|
-
export {
|
|
15
|
-
defaultProps
|
|
16
|
-
};
|
|
17
|
-
//# sourceMappingURL=defaultProps.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/defaultProps.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export 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 active: false,\n disabled: false,\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAO,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,QAAQ;AAAA,EACR,UAAU;AACZ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/index.d.js
DELETED