@elliemae/ds-form 3.0.0-next.43 → 3.0.0-next.46
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/FloatingLabelInput/FloatingLabelInputImpl.js +3 -0
- package/dist/cjs/FloatingLabelInput/FloatingLabelInputImpl.js.map +2 -2
- package/dist/cjs/Toggle/DSToggleImpl.js +3 -7
- package/dist/cjs/Toggle/DSToggleImpl.js.map +2 -2
- package/dist/esm/FloatingLabelInput/FloatingLabelInputImpl.js +3 -0
- package/dist/esm/FloatingLabelInput/FloatingLabelInputImpl.js.map +2 -2
- package/dist/esm/Toggle/DSToggleImpl.js +4 -13
- package/dist/esm/Toggle/DSToggleImpl.js.map +2 -2
- package/package.json +12 -12
|
@@ -76,6 +76,9 @@ class FloatingLabelInputImpl extends import_react.Component {
|
|
|
76
76
|
this.outlinePathRef = import_react.default.createRef();
|
|
77
77
|
this.outlineIdleRef = import_react.default.createRef();
|
|
78
78
|
this.labelRef = import_react.default.createRef();
|
|
79
|
+
this.sizes = this.sizes.bind(this);
|
|
80
|
+
this.isOpened = this.isOpened.bind(this);
|
|
81
|
+
this.getValue = this.getValue.bind(this);
|
|
79
82
|
this.updatePath = this.updatePath.bind(this);
|
|
80
83
|
}
|
|
81
84
|
componentDidMount() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/FloatingLabelInput/FloatingLabelInputImpl.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/no-unused-state */\nimport React, { Component } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { getComponentFromProps } from '@elliemae/ds-utilities';\nimport { DSTextWrapper } from '@elliemae/ds-text-wrapper';\nimport { ResizeObserver } from 'resize-observer';\nimport { getSvgPath } from './getSvgPath';\nimport { RequiredMark } from '../RequiredMark/RequiredMark';\n\nconst blockName = 'labeled-outline';\n\nconst Wrapper = aggregatedClasses('div')(blockName, null, ({ isOpen }) => ({\n 'has-value': isOpen,\n}));\nconst FloatingLabel = aggregatedClasses('label')(blockName, 'label');\nconst OutlineIdle = aggregatedClasses('div')(blockName, 'idle');\nconst Outline = aggregatedClasses('div')(blockName, 'outline');\nconst OutlinePath = aggregatedClasses('path')(blockName, 'outline__path');\n\nconst shouldUpdateSvgPath = ({ width, height, labelWidth }, prevSizes) => {\n if (width !== prevSizes.width) return true;\n if (height !== prevSizes.height) return true;\n return labelWidth !== prevSizes.labelWidth;\n};\n\nclass FloatingLabelInputImpl extends Component {\n resizeObserver = new ResizeObserver(() => this.updatePath());\n\n prevSizes = {};\n\n static defaultProps = { onChange: () => null };\n\n constructor(props) {\n super(props);\n this.wrapperRef = React.createRef();\n this.outlinePathRef = React.createRef();\n this.outlineIdleRef = React.createRef();\n this.labelRef = React.createRef();\n\n this.updatePath = this.updatePath.bind(this);\n }\n\n componentDidMount() {\n this.resizeObserver.observe(this.wrapperRef.current);\n }\n\n componentDidUpdate() {\n if (!shouldUpdateSvgPath(this.sizes, this.prevSizes)) return;\n this.updatePath();\n }\n\n componentWillUnmount() {\n this.resizeObserver.unobserve(this.wrapperRef.current);\n }\n\n get sizes() {\n const { current: labelEl } = this.labelRef;\n const { current: wrapperEl } = this.wrapperRef;\n const { current: outlineIdleEl } = this.outlineIdleRef;\n const elStyles = window.getComputedStyle(outlineIdleEl);\n const leftRadius = elStyles.getPropertyValue('border-top-left-radius');\n const rightRadius = elStyles.getPropertyValue('border-top-right-radius');\n const hasLeftRadius = parseFloat(leftRadius) !== 0;\n const hasRightRadius = parseFloat(rightRadius) !== 0;\n return {\n labelWidth: labelEl.offsetWidth * 0.9,\n width: wrapperEl.offsetWidth,\n height: wrapperEl.offsetHeight,\n radiusStyle: leftRadius,\n hasLeftRadius,\n hasRightRadius,\n };\n }\n\n get isOpened() {\n const { focused, isOpen, value } = this.props;\n return focused || (Array.isArray(value) ? !!value.length : !!value) || isOpen;\n }\n\n getValue(value) {\n const { valueAccessor } = this.props;\n if (valueAccessor) return valueAccessor(value);\n // is an event\n if (value && value.target) return value.target.value;\n\n return value;\n }\n\n updatePath() {\n const path = getSvgPath(this.sizes);\n this.prevSizes = this.sizes;\n this.outlinePathRef.current.setAttribute('d', path);\n }\n\n render() {\n const {\n ariaLabel,\n hasError,\n readOnly,\n disabled,\n inputComponent,\n labelText,\n onBlur,\n onFocus,\n innerRef,\n extraInputProps,\n required,\n value,\n onChange,\n mask,\n useSubfix,\n optional,\n } = this.props;\n\n const inputProps = {\n ariaLabel,\n className: 'floating-label-input-controller',\n disabled,\n hasError,\n onBlur,\n onChange,\n onFocus,\n readOnly,\n value,\n innerRef,\n mask,\n useSubfix,\n ...extraInputProps,\n };\n const InputComponent = getComponentFromProps(inputComponent, inputProps);\n const isOpen = this.isOpened;\n\n return (\n <Wrapper\n classProps={{\n hasError,\n isOpen,\n readOnly,\n disabled,\n }}\n innerRef={this.wrapperRef}\n onBlur={() => null}\n onFocus={() => null}\n onMouseOut={this.handleMouseOut}\n onMouseOver={this.handleMouseOver}\n >\n {InputComponent}\n <FloatingLabel classProps={{ isOpen }} innerRef={this.labelRef}>\n <DSTextWrapper maxWidth=\"100%\" text={labelText} />\n <RequiredMark optional={optional} required={required} />\n </FloatingLabel>\n <Outline>\n <svg>\n <OutlinePath innerRef={this.outlinePathRef} />\n </svg>\n </Outline>\n <OutlineIdle innerRef={this.outlineIdleRef} />\n </Wrapper>\n );\n }\n}\n\nexport { FloatingLabelInputImpl };\nexport default FloatingLabelInputImpl;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/no-unused-state */\nimport React, { Component } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { getComponentFromProps } from '@elliemae/ds-utilities';\nimport { DSTextWrapper } from '@elliemae/ds-text-wrapper';\nimport { ResizeObserver } from 'resize-observer';\nimport { getSvgPath } from './getSvgPath';\nimport { RequiredMark } from '../RequiredMark/RequiredMark';\n\nconst blockName = 'labeled-outline';\n\nconst Wrapper = aggregatedClasses('div')(blockName, null, ({ isOpen }) => ({\n 'has-value': isOpen,\n}));\nconst FloatingLabel = aggregatedClasses('label')(blockName, 'label');\nconst OutlineIdle = aggregatedClasses('div')(blockName, 'idle');\nconst Outline = aggregatedClasses('div')(blockName, 'outline');\nconst OutlinePath = aggregatedClasses('path')(blockName, 'outline__path');\n\nconst shouldUpdateSvgPath = ({ width, height, labelWidth }, prevSizes) => {\n if (width !== prevSizes.width) return true;\n if (height !== prevSizes.height) return true;\n return labelWidth !== prevSizes.labelWidth;\n};\n\nclass FloatingLabelInputImpl extends Component {\n resizeObserver = new ResizeObserver(() => this.updatePath());\n\n prevSizes = {};\n\n static defaultProps = { onChange: () => null };\n\n constructor(props) {\n super(props);\n this.wrapperRef = React.createRef();\n this.outlinePathRef = React.createRef();\n this.outlineIdleRef = React.createRef();\n this.labelRef = React.createRef();\n\n this.sizes = this.sizes.bind(this);\n this.isOpened = this.isOpened.bind(this);\n this.getValue = this.getValue.bind(this);\n this.updatePath = this.updatePath.bind(this);\n }\n\n componentDidMount() {\n this.resizeObserver.observe(this.wrapperRef.current);\n }\n\n componentDidUpdate() {\n if (!shouldUpdateSvgPath(this.sizes, this.prevSizes)) return;\n this.updatePath();\n }\n\n componentWillUnmount() {\n this.resizeObserver.unobserve(this.wrapperRef.current);\n }\n\n get sizes() {\n const { current: labelEl } = this.labelRef;\n const { current: wrapperEl } = this.wrapperRef;\n const { current: outlineIdleEl } = this.outlineIdleRef;\n const elStyles = window.getComputedStyle(outlineIdleEl);\n const leftRadius = elStyles.getPropertyValue('border-top-left-radius');\n const rightRadius = elStyles.getPropertyValue('border-top-right-radius');\n const hasLeftRadius = parseFloat(leftRadius) !== 0;\n const hasRightRadius = parseFloat(rightRadius) !== 0;\n return {\n labelWidth: labelEl.offsetWidth * 0.9,\n width: wrapperEl.offsetWidth,\n height: wrapperEl.offsetHeight,\n radiusStyle: leftRadius,\n hasLeftRadius,\n hasRightRadius,\n };\n }\n\n get isOpened() {\n const { focused, isOpen, value } = this.props;\n return focused || (Array.isArray(value) ? !!value.length : !!value) || isOpen;\n }\n\n getValue(value) {\n const { valueAccessor } = this.props;\n if (valueAccessor) return valueAccessor(value);\n // is an event\n if (value && value.target) return value.target.value;\n\n return value;\n }\n\n updatePath() {\n const path = getSvgPath(this.sizes);\n this.prevSizes = this.sizes;\n this.outlinePathRef.current.setAttribute('d', path);\n }\n\n render() {\n const {\n ariaLabel,\n hasError,\n readOnly,\n disabled,\n inputComponent,\n labelText,\n onBlur,\n onFocus,\n innerRef,\n extraInputProps,\n required,\n value,\n onChange,\n mask,\n useSubfix,\n optional,\n } = this.props;\n\n const inputProps = {\n ariaLabel,\n className: 'floating-label-input-controller',\n disabled,\n hasError,\n onBlur,\n onChange,\n onFocus,\n readOnly,\n value,\n innerRef,\n mask,\n useSubfix,\n ...extraInputProps,\n };\n const InputComponent = getComponentFromProps(inputComponent, inputProps);\n const isOpen = this.isOpened;\n\n return (\n <Wrapper\n classProps={{\n hasError,\n isOpen,\n readOnly,\n disabled,\n }}\n innerRef={this.wrapperRef}\n onBlur={() => null}\n onFocus={() => null}\n onMouseOut={this.handleMouseOut}\n onMouseOver={this.handleMouseOver}\n >\n {InputComponent}\n <FloatingLabel classProps={{ isOpen }} innerRef={this.labelRef}>\n <DSTextWrapper maxWidth=\"100%\" text={labelText} />\n <RequiredMark optional={optional} required={required} />\n </FloatingLabel>\n <Outline>\n <svg>\n <OutlinePath innerRef={this.outlinePathRef} />\n </svg>\n </Outline>\n <OutlineIdle innerRef={this.outlineIdleRef} />\n </Wrapper>\n );\n }\n}\n\nexport { FloatingLabelInputImpl };\nexport default FloatingLabelInputImpl;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -56,13 +56,7 @@ class DSToggleImpl extends import_react.Component {
|
|
|
56
56
|
constructor(props) {
|
|
57
57
|
super(props);
|
|
58
58
|
this.onDragStart = (clientX) => {
|
|
59
|
-
const {
|
|
60
|
-
startPoint,
|
|
61
|
-
checked,
|
|
62
|
-
isDragging,
|
|
63
|
-
boxWidth,
|
|
64
|
-
circleWidth
|
|
65
|
-
} = this.state;
|
|
59
|
+
const { startPoint, checked, isDragging, boxWidth, circleWidth } = this.state;
|
|
66
60
|
const drag = (0, import_toggleHelper.calculateDrag)(clientX, {
|
|
67
61
|
startPoint,
|
|
68
62
|
checked,
|
|
@@ -157,6 +151,8 @@ class DSToggleImpl extends import_react.Component {
|
|
|
157
151
|
};
|
|
158
152
|
this.circle = import_react.default.createRef();
|
|
159
153
|
this.box = import_react.default.createRef();
|
|
154
|
+
this.setDragOnChange = this.setDragOnChange.bind(this);
|
|
155
|
+
this.verifyElements = this.verifyElements.bind(this);
|
|
160
156
|
}
|
|
161
157
|
componentDidMount() {
|
|
162
158
|
this.verifyElements();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/Toggle/DSToggleImpl.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { Component } from 'react';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiC;AACjC,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { Component } from 'react';\nimport { isValidDrag, cleanDrag, calculateDrag, dragStartingPoints } from './toggleHelper';\nimport { DSToggleRender } from './DSToggleRender';\nimport { togglePropTypes } from './props';\n\nclass DSToggleImpl extends Component {\n constructor(props) {\n super(props);\n this.state = {\n checked: props.checked || false,\n inside: false,\n isDragging: false,\n // prevent draw of toggle before drag handle positioning calculations\n hide: true,\n drag: null,\n startPoint: null,\n circleWidth: null,\n boxWidth: null,\n };\n this.circle = React.createRef();\n this.box = React.createRef();\n\n this.setDragOnChange = this.setDragOnChange.bind(this);\n this.verifyElements = this.verifyElements.bind(this);\n }\n\n componentDidMount() {\n this.verifyElements();\n }\n\n componentDidUpdate(prevProps, prevState, snapshot) {\n if (\n this.state.hide &&\n this.state.circleWidth &&\n this.state.boxWidth &&\n prevState.hide &&\n this.state.drag !== null\n ) {\n // eslint-disable-next-line react/no-did-update-set-state\n this.setState({ hide: false });\n }\n if (snapshot) {\n this.verifyElements();\n }\n }\n\n /**\n * ******************************************************\n * Drag\n * ****************************************************** *\n *\n * @param clientX\n */\n onDragStart = (clientX) => {\n const { startPoint, checked, isDragging, boxWidth, circleWidth } = this.state;\n // const { checked: checkedProp, } = this.props\n const drag = calculateDrag(clientX, {\n startPoint,\n checked,\n isDragging,\n boxWidth,\n circleWidth,\n });\n if (drag) this.setState({ drag });\n // else this.setDragOnChange(checkedProp != null ? checkedProp : checked) // set initial position\n else this.setDragOnChange(checked); // set initial position\n };\n\n onDragStop = (e) => {\n const { checked } = this.state;\n // const { checked: checkedProp, } = this.props\n if (isValidDrag(this.state)) {\n this.onChange(e);\n this.setState(cleanDrag);\n // } else this.setDragOnChange(checkedProp != null ? checkedProp : checked) // set initial position\n } else this.setDragOnChange(checked); // set initial position\n };\n\n /**\n * ******************************************************\n * StandardEvents\n * ****************************************************** *\n *\n * @param e\n */\n onBlur = (e) => {\n const { onBlur, id } = this.props;\n if (onBlur) onBlur(e, id);\n };\n\n onFocus = (e) => {\n const { onFocus, id } = this.props;\n if (onFocus) onFocus(e, id);\n };\n\n onChange = (e) => {\n const { checked } = this.state;\n const {\n onChange,\n id,\n value,\n // checked: checkedProp,\n } = this.props;\n const newCheck = !checked;\n // this.setState({\n // checked: checkedProp != null ? checkedProp : newCheck,\n // })\n this.setState({\n checked: newCheck,\n });\n e.target.value = value;\n e.target.checked = newCheck;\n e.checked = newCheck;\n onChange(e, id);\n // this.setDragOnChange(checkedProp != null ? checkedProp : newCheck) // set new position\n this.setDragOnChange(newCheck); // set new position\n };\n\n /** ******************************************************\n MouseEvents\n ******************************************************* * */\n onMouseEnter = () => {\n this.setState({ inside: true });\n };\n\n onMouseLeave = () => {\n this.setState({ inside: false });\n };\n\n onMouseMove = (event) => {\n event.preventDefault();\n this.onDragStart(event.clientX);\n };\n\n onMouseDown = (event) => {\n this.onDragStart(event.clientX);\n this.setState({ startPoint: event.clientX, isDragging: true });\n window.addEventListener('mousemove', this.onMouseMove);\n window.addEventListener('mouseup', this.onMouseUp);\n };\n\n onMouseUp = (event) => {\n this.onDragStop(event);\n window.removeEventListener('mousemove', this.onMouseMove);\n window.removeEventListener('mouseup', this.onMouseUp);\n };\n\n /** ******************************************************\n Touch\n ******************************************************* * */\n onTouchCancel = () => {\n this.setState({ inside: false });\n };\n\n onTouchEnd = (event) => {\n event.preventDefault();\n this.onDragStop(event);\n };\n\n onTouchMove = (event) => {\n this.onDragStart(event.touches[0].clientX);\n };\n\n onTouchStart = (event) => {\n this.onDragStart(event.touches[0].clientX);\n this.setState({ startPoint: event.touches[0].clientX, isDragging: true });\n };\n\n static getDerivedStateFromProps(props, state) {\n if (props.checked === true || props.checked === false) {\n return {\n checked: props.checked,\n ...dragStartingPoints(props.checked)(state),\n };\n }\n return null;\n }\n\n getSnapshotBeforeUpdate(prevProps) {\n const { size } = this.props;\n if (prevProps.size !== size) {\n return true;\n }\n return false;\n }\n\n /**\n * ******************************************************\n * other\n * ****************************************************** *\n *\n * @param currentCheckState\n */\n setDragOnChange(currentCheckState) {\n this.setState(dragStartingPoints(currentCheckState));\n }\n\n verifyElements() {\n const { checked } = this.state;\n const { checked: checkedProp } = this.props;\n const nodesInterval = setInterval(() => {\n // !important it checks when nodes are availables\n if (!this.circle || !this.box || !this.circle.current || !this.box.current) return;\n const {\n current: { clientWidth: circleWidth },\n } = this.circle;\n const {\n current: { clientWidth: boxWidth },\n } = this.box;\n if (!circleWidth || !boxWidth || circleWidth === boxWidth) return;\n this.setState({\n boxWidth,\n circleWidth,\n });\n this.setDragOnChange(checkedProp != null ? checkedProp : checked);\n // this.setDragOnChange(checked)\n clearInterval(nodesInterval);\n }, 5);\n }\n\n render() {\n const { checked, drag, inside, hide } = this.state;\n const dragStyle = drag !== null || checked || this.props.checked ? { left: `${drag}px` } : null;\n return (\n <DSToggleRender\n {...this.props}\n defaultState={this.props.checked}\n checked={checked}\n containerRef={this.box}\n hide={hide}\n dragStyle={dragStyle}\n handRef={this.circle}\n inside={inside}\n onBlur={this.onBlur}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onMouseDown={this.onMouseDown}\n onMouseEnter={this.onMouseEnter}\n onMouseLeave={this.onMouseLeave}\n onTouchCancel={this.onTouchCancel}\n onTouchEnd={this.onTouchEnd}\n onTouchMove={this.onTouchMove}\n onTouchStart={this.onTouchStart}\n />\n );\n }\n}\n\nDSToggleImpl.propTypes = togglePropTypes;\n\nexport { DSToggleImpl };\nexport default DSToggleImpl;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -46,6 +46,9 @@ class FloatingLabelInputImpl extends Component {
|
|
|
46
46
|
this.outlinePathRef = React2.createRef();
|
|
47
47
|
this.outlineIdleRef = React2.createRef();
|
|
48
48
|
this.labelRef = React2.createRef();
|
|
49
|
+
this.sizes = this.sizes.bind(this);
|
|
50
|
+
this.isOpened = this.isOpened.bind(this);
|
|
51
|
+
this.getValue = this.getValue.bind(this);
|
|
49
52
|
this.updatePath = this.updatePath.bind(this);
|
|
50
53
|
}
|
|
51
54
|
componentDidMount() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/FloatingLabelInput/FloatingLabelInputImpl.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/no-unused-state */\nimport React, { Component } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { getComponentFromProps } from '@elliemae/ds-utilities';\nimport { DSTextWrapper } from '@elliemae/ds-text-wrapper';\nimport { ResizeObserver } from 'resize-observer';\nimport { getSvgPath } from './getSvgPath';\nimport { RequiredMark } from '../RequiredMark/RequiredMark';\n\nconst blockName = 'labeled-outline';\n\nconst Wrapper = aggregatedClasses('div')(blockName, null, ({ isOpen }) => ({\n 'has-value': isOpen,\n}));\nconst FloatingLabel = aggregatedClasses('label')(blockName, 'label');\nconst OutlineIdle = aggregatedClasses('div')(blockName, 'idle');\nconst Outline = aggregatedClasses('div')(blockName, 'outline');\nconst OutlinePath = aggregatedClasses('path')(blockName, 'outline__path');\n\nconst shouldUpdateSvgPath = ({ width, height, labelWidth }, prevSizes) => {\n if (width !== prevSizes.width) return true;\n if (height !== prevSizes.height) return true;\n return labelWidth !== prevSizes.labelWidth;\n};\n\nclass FloatingLabelInputImpl extends Component {\n resizeObserver = new ResizeObserver(() => this.updatePath());\n\n prevSizes = {};\n\n static defaultProps = { onChange: () => null };\n\n constructor(props) {\n super(props);\n this.wrapperRef = React.createRef();\n this.outlinePathRef = React.createRef();\n this.outlineIdleRef = React.createRef();\n this.labelRef = React.createRef();\n\n this.updatePath = this.updatePath.bind(this);\n }\n\n componentDidMount() {\n this.resizeObserver.observe(this.wrapperRef.current);\n }\n\n componentDidUpdate() {\n if (!shouldUpdateSvgPath(this.sizes, this.prevSizes)) return;\n this.updatePath();\n }\n\n componentWillUnmount() {\n this.resizeObserver.unobserve(this.wrapperRef.current);\n }\n\n get sizes() {\n const { current: labelEl } = this.labelRef;\n const { current: wrapperEl } = this.wrapperRef;\n const { current: outlineIdleEl } = this.outlineIdleRef;\n const elStyles = window.getComputedStyle(outlineIdleEl);\n const leftRadius = elStyles.getPropertyValue('border-top-left-radius');\n const rightRadius = elStyles.getPropertyValue('border-top-right-radius');\n const hasLeftRadius = parseFloat(leftRadius) !== 0;\n const hasRightRadius = parseFloat(rightRadius) !== 0;\n return {\n labelWidth: labelEl.offsetWidth * 0.9,\n width: wrapperEl.offsetWidth,\n height: wrapperEl.offsetHeight,\n radiusStyle: leftRadius,\n hasLeftRadius,\n hasRightRadius,\n };\n }\n\n get isOpened() {\n const { focused, isOpen, value } = this.props;\n return focused || (Array.isArray(value) ? !!value.length : !!value) || isOpen;\n }\n\n getValue(value) {\n const { valueAccessor } = this.props;\n if (valueAccessor) return valueAccessor(value);\n // is an event\n if (value && value.target) return value.target.value;\n\n return value;\n }\n\n updatePath() {\n const path = getSvgPath(this.sizes);\n this.prevSizes = this.sizes;\n this.outlinePathRef.current.setAttribute('d', path);\n }\n\n render() {\n const {\n ariaLabel,\n hasError,\n readOnly,\n disabled,\n inputComponent,\n labelText,\n onBlur,\n onFocus,\n innerRef,\n extraInputProps,\n required,\n value,\n onChange,\n mask,\n useSubfix,\n optional,\n } = this.props;\n\n const inputProps = {\n ariaLabel,\n className: 'floating-label-input-controller',\n disabled,\n hasError,\n onBlur,\n onChange,\n onFocus,\n readOnly,\n value,\n innerRef,\n mask,\n useSubfix,\n ...extraInputProps,\n };\n const InputComponent = getComponentFromProps(inputComponent, inputProps);\n const isOpen = this.isOpened;\n\n return (\n <Wrapper\n classProps={{\n hasError,\n isOpen,\n readOnly,\n disabled,\n }}\n innerRef={this.wrapperRef}\n onBlur={() => null}\n onFocus={() => null}\n onMouseOut={this.handleMouseOut}\n onMouseOver={this.handleMouseOver}\n >\n {InputComponent}\n <FloatingLabel classProps={{ isOpen }} innerRef={this.labelRef}>\n <DSTextWrapper maxWidth=\"100%\" text={labelText} />\n <RequiredMark optional={optional} required={required} />\n </FloatingLabel>\n <Outline>\n <svg>\n <OutlinePath innerRef={this.outlinePathRef} />\n </svg>\n </Outline>\n <OutlineIdle innerRef={this.outlineIdleRef} />\n </Wrapper>\n );\n }\n}\n\nexport { FloatingLabelInputImpl };\nexport default FloatingLabelInputImpl;\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/no-unused-state */\nimport React, { Component } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { getComponentFromProps } from '@elliemae/ds-utilities';\nimport { DSTextWrapper } from '@elliemae/ds-text-wrapper';\nimport { ResizeObserver } from 'resize-observer';\nimport { getSvgPath } from './getSvgPath';\nimport { RequiredMark } from '../RequiredMark/RequiredMark';\n\nconst blockName = 'labeled-outline';\n\nconst Wrapper = aggregatedClasses('div')(blockName, null, ({ isOpen }) => ({\n 'has-value': isOpen,\n}));\nconst FloatingLabel = aggregatedClasses('label')(blockName, 'label');\nconst OutlineIdle = aggregatedClasses('div')(blockName, 'idle');\nconst Outline = aggregatedClasses('div')(blockName, 'outline');\nconst OutlinePath = aggregatedClasses('path')(blockName, 'outline__path');\n\nconst shouldUpdateSvgPath = ({ width, height, labelWidth }, prevSizes) => {\n if (width !== prevSizes.width) return true;\n if (height !== prevSizes.height) return true;\n return labelWidth !== prevSizes.labelWidth;\n};\n\nclass FloatingLabelInputImpl extends Component {\n resizeObserver = new ResizeObserver(() => this.updatePath());\n\n prevSizes = {};\n\n static defaultProps = { onChange: () => null };\n\n constructor(props) {\n super(props);\n this.wrapperRef = React.createRef();\n this.outlinePathRef = React.createRef();\n this.outlineIdleRef = React.createRef();\n this.labelRef = React.createRef();\n\n this.sizes = this.sizes.bind(this);\n this.isOpened = this.isOpened.bind(this);\n this.getValue = this.getValue.bind(this);\n this.updatePath = this.updatePath.bind(this);\n }\n\n componentDidMount() {\n this.resizeObserver.observe(this.wrapperRef.current);\n }\n\n componentDidUpdate() {\n if (!shouldUpdateSvgPath(this.sizes, this.prevSizes)) return;\n this.updatePath();\n }\n\n componentWillUnmount() {\n this.resizeObserver.unobserve(this.wrapperRef.current);\n }\n\n get sizes() {\n const { current: labelEl } = this.labelRef;\n const { current: wrapperEl } = this.wrapperRef;\n const { current: outlineIdleEl } = this.outlineIdleRef;\n const elStyles = window.getComputedStyle(outlineIdleEl);\n const leftRadius = elStyles.getPropertyValue('border-top-left-radius');\n const rightRadius = elStyles.getPropertyValue('border-top-right-radius');\n const hasLeftRadius = parseFloat(leftRadius) !== 0;\n const hasRightRadius = parseFloat(rightRadius) !== 0;\n return {\n labelWidth: labelEl.offsetWidth * 0.9,\n width: wrapperEl.offsetWidth,\n height: wrapperEl.offsetHeight,\n radiusStyle: leftRadius,\n hasLeftRadius,\n hasRightRadius,\n };\n }\n\n get isOpened() {\n const { focused, isOpen, value } = this.props;\n return focused || (Array.isArray(value) ? !!value.length : !!value) || isOpen;\n }\n\n getValue(value) {\n const { valueAccessor } = this.props;\n if (valueAccessor) return valueAccessor(value);\n // is an event\n if (value && value.target) return value.target.value;\n\n return value;\n }\n\n updatePath() {\n const path = getSvgPath(this.sizes);\n this.prevSizes = this.sizes;\n this.outlinePathRef.current.setAttribute('d', path);\n }\n\n render() {\n const {\n ariaLabel,\n hasError,\n readOnly,\n disabled,\n inputComponent,\n labelText,\n onBlur,\n onFocus,\n innerRef,\n extraInputProps,\n required,\n value,\n onChange,\n mask,\n useSubfix,\n optional,\n } = this.props;\n\n const inputProps = {\n ariaLabel,\n className: 'floating-label-input-controller',\n disabled,\n hasError,\n onBlur,\n onChange,\n onFocus,\n readOnly,\n value,\n innerRef,\n mask,\n useSubfix,\n ...extraInputProps,\n };\n const InputComponent = getComponentFromProps(inputComponent, inputProps);\n const isOpen = this.isOpened;\n\n return (\n <Wrapper\n classProps={{\n hasError,\n isOpen,\n readOnly,\n disabled,\n }}\n innerRef={this.wrapperRef}\n onBlur={() => null}\n onFocus={() => null}\n onMouseOut={this.handleMouseOut}\n onMouseOver={this.handleMouseOver}\n >\n {InputComponent}\n <FloatingLabel classProps={{ isOpen }} innerRef={this.labelRef}>\n <DSTextWrapper maxWidth=\"100%\" text={labelText} />\n <RequiredMark optional={optional} required={required} />\n </FloatingLabel>\n <Outline>\n <svg>\n <OutlinePath innerRef={this.outlinePathRef} />\n </svg>\n </Outline>\n <OutlineIdle innerRef={this.outlineIdleRef} />\n </Wrapper>\n );\n }\n}\n\nexport { FloatingLabelInputImpl };\nexport default FloatingLabelInputImpl;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -19,25 +19,14 @@ var __spreadValues = (a, b) => {
|
|
|
19
19
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
20
|
import * as React from "react";
|
|
21
21
|
import React2, { Component } from "react";
|
|
22
|
-
import {
|
|
23
|
-
isValidDrag,
|
|
24
|
-
cleanDrag,
|
|
25
|
-
calculateDrag,
|
|
26
|
-
dragStartingPoints
|
|
27
|
-
} from "./toggleHelper";
|
|
22
|
+
import { isValidDrag, cleanDrag, calculateDrag, dragStartingPoints } from "./toggleHelper";
|
|
28
23
|
import { DSToggleRender } from "./DSToggleRender";
|
|
29
24
|
import { togglePropTypes } from "./props";
|
|
30
25
|
class DSToggleImpl extends Component {
|
|
31
26
|
constructor(props) {
|
|
32
27
|
super(props);
|
|
33
28
|
this.onDragStart = (clientX) => {
|
|
34
|
-
const {
|
|
35
|
-
startPoint,
|
|
36
|
-
checked,
|
|
37
|
-
isDragging,
|
|
38
|
-
boxWidth,
|
|
39
|
-
circleWidth
|
|
40
|
-
} = this.state;
|
|
29
|
+
const { startPoint, checked, isDragging, boxWidth, circleWidth } = this.state;
|
|
41
30
|
const drag = calculateDrag(clientX, {
|
|
42
31
|
startPoint,
|
|
43
32
|
checked,
|
|
@@ -132,6 +121,8 @@ class DSToggleImpl extends Component {
|
|
|
132
121
|
};
|
|
133
122
|
this.circle = React2.createRef();
|
|
134
123
|
this.box = React2.createRef();
|
|
124
|
+
this.setDragOnChange = this.setDragOnChange.bind(this);
|
|
125
|
+
this.verifyElements = this.verifyElements.bind(this);
|
|
135
126
|
}
|
|
136
127
|
componentDidMount() {
|
|
137
128
|
this.verifyElements();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/Toggle/DSToggleImpl.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { Component } from 'react';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { Component } from 'react';\nimport { isValidDrag, cleanDrag, calculateDrag, dragStartingPoints } from './toggleHelper';\nimport { DSToggleRender } from './DSToggleRender';\nimport { togglePropTypes } from './props';\n\nclass DSToggleImpl extends Component {\n constructor(props) {\n super(props);\n this.state = {\n checked: props.checked || false,\n inside: false,\n isDragging: false,\n // prevent draw of toggle before drag handle positioning calculations\n hide: true,\n drag: null,\n startPoint: null,\n circleWidth: null,\n boxWidth: null,\n };\n this.circle = React.createRef();\n this.box = React.createRef();\n\n this.setDragOnChange = this.setDragOnChange.bind(this);\n this.verifyElements = this.verifyElements.bind(this);\n }\n\n componentDidMount() {\n this.verifyElements();\n }\n\n componentDidUpdate(prevProps, prevState, snapshot) {\n if (\n this.state.hide &&\n this.state.circleWidth &&\n this.state.boxWidth &&\n prevState.hide &&\n this.state.drag !== null\n ) {\n // eslint-disable-next-line react/no-did-update-set-state\n this.setState({ hide: false });\n }\n if (snapshot) {\n this.verifyElements();\n }\n }\n\n /**\n * ******************************************************\n * Drag\n * ****************************************************** *\n *\n * @param clientX\n */\n onDragStart = (clientX) => {\n const { startPoint, checked, isDragging, boxWidth, circleWidth } = this.state;\n // const { checked: checkedProp, } = this.props\n const drag = calculateDrag(clientX, {\n startPoint,\n checked,\n isDragging,\n boxWidth,\n circleWidth,\n });\n if (drag) this.setState({ drag });\n // else this.setDragOnChange(checkedProp != null ? checkedProp : checked) // set initial position\n else this.setDragOnChange(checked); // set initial position\n };\n\n onDragStop = (e) => {\n const { checked } = this.state;\n // const { checked: checkedProp, } = this.props\n if (isValidDrag(this.state)) {\n this.onChange(e);\n this.setState(cleanDrag);\n // } else this.setDragOnChange(checkedProp != null ? checkedProp : checked) // set initial position\n } else this.setDragOnChange(checked); // set initial position\n };\n\n /**\n * ******************************************************\n * StandardEvents\n * ****************************************************** *\n *\n * @param e\n */\n onBlur = (e) => {\n const { onBlur, id } = this.props;\n if (onBlur) onBlur(e, id);\n };\n\n onFocus = (e) => {\n const { onFocus, id } = this.props;\n if (onFocus) onFocus(e, id);\n };\n\n onChange = (e) => {\n const { checked } = this.state;\n const {\n onChange,\n id,\n value,\n // checked: checkedProp,\n } = this.props;\n const newCheck = !checked;\n // this.setState({\n // checked: checkedProp != null ? checkedProp : newCheck,\n // })\n this.setState({\n checked: newCheck,\n });\n e.target.value = value;\n e.target.checked = newCheck;\n e.checked = newCheck;\n onChange(e, id);\n // this.setDragOnChange(checkedProp != null ? checkedProp : newCheck) // set new position\n this.setDragOnChange(newCheck); // set new position\n };\n\n /** ******************************************************\n MouseEvents\n ******************************************************* * */\n onMouseEnter = () => {\n this.setState({ inside: true });\n };\n\n onMouseLeave = () => {\n this.setState({ inside: false });\n };\n\n onMouseMove = (event) => {\n event.preventDefault();\n this.onDragStart(event.clientX);\n };\n\n onMouseDown = (event) => {\n this.onDragStart(event.clientX);\n this.setState({ startPoint: event.clientX, isDragging: true });\n window.addEventListener('mousemove', this.onMouseMove);\n window.addEventListener('mouseup', this.onMouseUp);\n };\n\n onMouseUp = (event) => {\n this.onDragStop(event);\n window.removeEventListener('mousemove', this.onMouseMove);\n window.removeEventListener('mouseup', this.onMouseUp);\n };\n\n /** ******************************************************\n Touch\n ******************************************************* * */\n onTouchCancel = () => {\n this.setState({ inside: false });\n };\n\n onTouchEnd = (event) => {\n event.preventDefault();\n this.onDragStop(event);\n };\n\n onTouchMove = (event) => {\n this.onDragStart(event.touches[0].clientX);\n };\n\n onTouchStart = (event) => {\n this.onDragStart(event.touches[0].clientX);\n this.setState({ startPoint: event.touches[0].clientX, isDragging: true });\n };\n\n static getDerivedStateFromProps(props, state) {\n if (props.checked === true || props.checked === false) {\n return {\n checked: props.checked,\n ...dragStartingPoints(props.checked)(state),\n };\n }\n return null;\n }\n\n getSnapshotBeforeUpdate(prevProps) {\n const { size } = this.props;\n if (prevProps.size !== size) {\n return true;\n }\n return false;\n }\n\n /**\n * ******************************************************\n * other\n * ****************************************************** *\n *\n * @param currentCheckState\n */\n setDragOnChange(currentCheckState) {\n this.setState(dragStartingPoints(currentCheckState));\n }\n\n verifyElements() {\n const { checked } = this.state;\n const { checked: checkedProp } = this.props;\n const nodesInterval = setInterval(() => {\n // !important it checks when nodes are availables\n if (!this.circle || !this.box || !this.circle.current || !this.box.current) return;\n const {\n current: { clientWidth: circleWidth },\n } = this.circle;\n const {\n current: { clientWidth: boxWidth },\n } = this.box;\n if (!circleWidth || !boxWidth || circleWidth === boxWidth) return;\n this.setState({\n boxWidth,\n circleWidth,\n });\n this.setDragOnChange(checkedProp != null ? checkedProp : checked);\n // this.setDragOnChange(checked)\n clearInterval(nodesInterval);\n }, 5);\n }\n\n render() {\n const { checked, drag, inside, hide } = this.state;\n const dragStyle = drag !== null || checked || this.props.checked ? { left: `${drag}px` } : null;\n return (\n <DSToggleRender\n {...this.props}\n defaultState={this.props.checked}\n checked={checked}\n containerRef={this.box}\n hide={hide}\n dragStyle={dragStyle}\n handRef={this.circle}\n inside={inside}\n onBlur={this.onBlur}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onMouseDown={this.onMouseDown}\n onMouseEnter={this.onMouseEnter}\n onMouseLeave={this.onMouseLeave}\n onTouchCancel={this.onTouchCancel}\n onTouchEnd={this.onTouchEnd}\n onTouchMove={this.onTouchMove}\n onTouchStart={this.onTouchStart}\n />\n );\n }\n}\n\nDSToggleImpl.propTypes = togglePropTypes;\n\nexport { DSToggleImpl };\nexport default DSToggleImpl;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form",
|
|
3
|
-
"version": "3.0.0-next.
|
|
3
|
+
"version": "3.0.0-next.46",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Form",
|
|
6
6
|
"files": [
|
|
@@ -475,17 +475,17 @@
|
|
|
475
475
|
"indent": 4
|
|
476
476
|
},
|
|
477
477
|
"dependencies": {
|
|
478
|
-
"@elliemae/ds-button": "3.0.0-next.
|
|
479
|
-
"@elliemae/ds-classnames": "3.0.0-next.
|
|
480
|
-
"@elliemae/ds-common": "3.0.0-next.
|
|
481
|
-
"@elliemae/ds-grid": "3.0.0-next.
|
|
482
|
-
"@elliemae/ds-icons": "3.0.0-next.
|
|
483
|
-
"@elliemae/ds-shared": "3.0.0-next.
|
|
484
|
-
"@elliemae/ds-system": "3.0.0-next.
|
|
485
|
-
"@elliemae/ds-text-wrapper": "3.0.0-next.
|
|
486
|
-
"@elliemae/ds-tooltip": "3.0.0-next.
|
|
487
|
-
"@elliemae/ds-truncated-tooltip-text": "3.0.0-next.
|
|
488
|
-
"@elliemae/ds-utilities": "3.0.0-next.
|
|
478
|
+
"@elliemae/ds-button": "3.0.0-next.46",
|
|
479
|
+
"@elliemae/ds-classnames": "3.0.0-next.46",
|
|
480
|
+
"@elliemae/ds-common": "3.0.0-next.46",
|
|
481
|
+
"@elliemae/ds-grid": "3.0.0-next.46",
|
|
482
|
+
"@elliemae/ds-icons": "3.0.0-next.46",
|
|
483
|
+
"@elliemae/ds-shared": "3.0.0-next.46",
|
|
484
|
+
"@elliemae/ds-system": "3.0.0-next.46",
|
|
485
|
+
"@elliemae/ds-text-wrapper": "3.0.0-next.46",
|
|
486
|
+
"@elliemae/ds-tooltip": "3.0.0-next.46",
|
|
487
|
+
"@elliemae/ds-truncated-tooltip-text": "3.0.0-next.46",
|
|
488
|
+
"@elliemae/ds-utilities": "3.0.0-next.46",
|
|
489
489
|
"memoize-one": "~5.1.1",
|
|
490
490
|
"moment": "~2.29.1",
|
|
491
491
|
"prop-types": "~15.8.1",
|