@pie-lib/graphing 2.4.13 → 2.4.14
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/CHANGELOG.md +11 -0
- package/lib/mark-label.js +5 -1
- package/lib/mark-label.js.map +1 -1
- package/package.json +2 -2
- package/src/mark-label.jsx +5 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.4.14](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing@2.4.13...@pie-lib/graphing@2.4.14) (2022-03-22)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* Apply different disable styles for background mark and when mark label is not in edit mode. ([a1657ec](https://github.com/pie-framework/pie-lib/commit/a1657ec7562c96bf760bbf936686816700a7d739))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [2.4.13](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing@2.4.12...@pie-lib/graphing@2.4.13) (2022-03-22)
|
|
7
18
|
|
|
8
19
|
|
package/lib/mark-label.js
CHANGED
|
@@ -59,6 +59,10 @@ var styles = function styles(theme) {
|
|
|
59
59
|
color: _renderUi.color.primaryDark()
|
|
60
60
|
},
|
|
61
61
|
disabled: {
|
|
62
|
+
border: "solid 1px ".concat(_renderUi.color.primaryDark()),
|
|
63
|
+
background: _renderUi.color.background()
|
|
64
|
+
},
|
|
65
|
+
disabledMark: {
|
|
62
66
|
border: "solid 1px ".concat(_renderUi.color.disabled()),
|
|
63
67
|
background: _renderUi.color.background(),
|
|
64
68
|
color: _renderUi.color.disabled()
|
|
@@ -185,7 +189,7 @@ var MarkLabel = function MarkLabel(props) {
|
|
|
185
189
|
externalInputRef(r);
|
|
186
190
|
},
|
|
187
191
|
disabled: disabledInput,
|
|
188
|
-
inputClassName: (0, _classnames["default"])(classes.input,
|
|
192
|
+
inputClassName: (0, _classnames["default"])(classes.input, disabled && classes.disabled, mark.disabled && classes.disabledMark),
|
|
189
193
|
value: label,
|
|
190
194
|
style: style,
|
|
191
195
|
onChange: onChange
|
package/lib/mark-label.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/mark-label.jsx"],"names":["styles","theme","input","padding","spacing","unit","fontFamily","typography","fontSize","border","color","secondary","borderRadius","primaryDark","disabled","background","position","graphProps","mark","rect","width","height","scale","domain","range","shift","rightEdge","x","bottomEdge","y","h","max","v","min","coordinates","left","top","MarkLabel","props","setInput","_ref","node","classes","externalInputRef","inputRef","label","setLabel","onChange","e","target","value","debouncedLabel","getBoundingClientRect","pos","leftTop","style","pointerEvents","disabledInput","r","propTypes","PropTypes","bool","func","types","GraphPropsType","object"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAAAC,KAAK;AAAA,SAAK;AACvBC,IAAAA,KAAK,EAAE;AACL,eAAO,OADF;AAELC,MAAAA,OAAO,EAAEF,KAAK,CAACG,OAAN,CAAcC,IAAd,GAAqB,GAFzB;AAGLC,MAAAA,UAAU,EAAEL,KAAK,CAACM,UAAN,CAAiBD,UAHxB;AAILE,MAAAA,QAAQ,EAAEP,KAAK,CAACM,UAAN,CAAiBC,QAJtB;AAKLC,MAAAA,MAAM,sBAAeC,gBAAMC,SAAN,EAAf,CALD;AAMLC,MAAAA,YAAY,EAAE,KANT;AAOLF,MAAAA,KAAK,EAAEA,gBAAMG,WAAN;AAPF,KADgB;AAUvBC,IAAAA,QAAQ,EAAE;AACRL,MAAAA,MAAM,sBAAeC,gBAAMI,QAAN,EAAf,
|
|
1
|
+
{"version":3,"sources":["../src/mark-label.jsx"],"names":["styles","theme","input","padding","spacing","unit","fontFamily","typography","fontSize","border","color","secondary","borderRadius","primaryDark","disabled","background","disabledMark","position","graphProps","mark","rect","width","height","scale","domain","range","shift","rightEdge","x","bottomEdge","y","h","max","v","min","coordinates","left","top","MarkLabel","props","setInput","_ref","node","classes","externalInputRef","inputRef","label","setLabel","onChange","e","target","value","debouncedLabel","getBoundingClientRect","pos","leftTop","style","pointerEvents","disabledInput","r","propTypes","PropTypes","bool","func","types","GraphPropsType","object"],"mappings":"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","sourcesContent":["import React, { useState, useCallback, useEffect } from 'react';\nimport cn from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport AutosizeInput from 'react-input-autosize';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { useDebounce } from './use-debounce';\nimport { color } from '@pie-lib/render-ui';\n\nconst styles = theme => ({\n input: {\n float: 'right',\n padding: theme.spacing.unit * 0.5,\n fontFamily: theme.typography.fontFamily,\n fontSize: theme.typography.fontSize,\n border: `solid 1px ${color.secondary()}`,\n borderRadius: '3px',\n color: color.primaryDark()\n },\n disabled: {\n border: `solid 1px ${color.primaryDark()}`,\n background: color.background()\n },\n disabledMark: {\n border: `solid 1px ${color.disabled()}`,\n background: color.background(),\n color: color.disabled()\n }\n});\n\nexport const position = (graphProps, mark, rect) => {\n rect = rect || { width: 0, height: 0 };\n const { scale, domain, range } = graphProps;\n const shift = 10;\n\n const rightEdge = scale.x(mark.x) + rect.width + shift;\n const bottomEdge = scale.y(mark.y) + rect.height + shift;\n\n const h = rightEdge >= scale.x(domain.max) ? 'left' : 'right';\n const v = bottomEdge >= scale.y(range.min) ? 'top' : 'bottom';\n return `${v}-${h}`;\n};\n\nexport const coordinates = (graphProps, mark, rect, position) => {\n const { scale } = graphProps;\n const shift = 10;\n rect = rect || { width: 0, height: 0 };\n\n switch (position) {\n case 'bottom-right': {\n return { left: scale.x(mark.x) + shift, top: scale.y(mark.y) + shift };\n }\n case 'bottom-left': {\n return { left: scale.x(mark.x) - shift - rect.width, top: scale.y(mark.y) + shift };\n }\n case 'top-left': {\n return {\n left: scale.x(mark.x) - shift - rect.width,\n top: scale.y(mark.y) - shift - rect.height\n };\n }\n case 'top-right': {\n return {\n left: scale.x(mark.x) + shift,\n top: scale.y(mark.y) - shift - rect.height\n };\n }\n }\n};\n\nexport const MarkLabel = props => {\n const [input, setInput] = useState(null);\n const _ref = useCallback(node => setInput(node));\n\n const { mark, graphProps, classes, disabled, inputRef: externalInputRef } = props;\n const [label, setLabel] = useState(mark.label);\n\n const onChange = e => setLabel(e.target.value);\n\n const debouncedLabel = useDebounce(label, 200);\n\n // useState only sets the value once, to synch props to state need useEffect\n useEffect(() => {\n setLabel(mark.label);\n }, [mark.label]);\n\n // pick up the change to debouncedLabel and save it\n useEffect(() => {\n if (typeof debouncedLabel === 'string' && debouncedLabel !== mark.label) {\n props.onChange(debouncedLabel);\n }\n }, [debouncedLabel]);\n\n const rect = input ? input.getBoundingClientRect() : { width: 0, height: 0 };\n const pos = position(graphProps, mark, rect);\n const leftTop = coordinates(graphProps, mark, rect, pos);\n\n const style = {\n position: 'absolute',\n pointerEvents: 'auto',\n ...leftTop\n };\n\n const disabledInput = disabled || mark.disabled;\n\n return (\n <AutosizeInput\n inputRef={r => {\n _ref(r);\n externalInputRef(r);\n }}\n disabled={disabledInput}\n inputClassName={cn(classes.input, disabled && classes.disabled, mark.disabled && classes.disabledMark)}\n value={label}\n style={style}\n onChange={onChange}\n />\n );\n};\n\nMarkLabel.propTypes = {\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n graphProps: types.GraphPropsType,\n classes: PropTypes.object,\n inputRef: PropTypes.func,\n mark: PropTypes.object\n};\n\nexport default withStyles(styles)(MarkLabel);\n"],"file":"mark-label.js"}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
|
-
"version": "2.4.
|
|
6
|
+
"version": "2.4.14",
|
|
7
7
|
"description": "Graphing components",
|
|
8
8
|
"keywords": [
|
|
9
9
|
"react",
|
|
@@ -43,6 +43,6 @@
|
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"react": "^16.8.1"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "5ae5b49b61f7ccd4c5f5cf33b026db1823c108f1",
|
|
47
47
|
"scripts": {}
|
|
48
48
|
}
|
package/src/mark-label.jsx
CHANGED
|
@@ -18,6 +18,10 @@ const styles = theme => ({
|
|
|
18
18
|
color: color.primaryDark()
|
|
19
19
|
},
|
|
20
20
|
disabled: {
|
|
21
|
+
border: `solid 1px ${color.primaryDark()}`,
|
|
22
|
+
background: color.background()
|
|
23
|
+
},
|
|
24
|
+
disabledMark: {
|
|
21
25
|
border: `solid 1px ${color.disabled()}`,
|
|
22
26
|
background: color.background(),
|
|
23
27
|
color: color.disabled()
|
|
@@ -106,7 +110,7 @@ export const MarkLabel = props => {
|
|
|
106
110
|
externalInputRef(r);
|
|
107
111
|
}}
|
|
108
112
|
disabled={disabledInput}
|
|
109
|
-
inputClassName={cn(classes.input,
|
|
113
|
+
inputClassName={cn(classes.input, disabled && classes.disabled, mark.disabled && classes.disabledMark)}
|
|
110
114
|
value={label}
|
|
111
115
|
style={style}
|
|
112
116
|
onChange={onChange}
|