@pie-lib/text-select 1.8.8 → 1.8.12
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 +32 -0
- package/lib/text-select.js +5 -2
- package/lib/text-select.js.map +1 -1
- package/lib/token-select/index.js +30 -25
- package/lib/token-select/index.js.map +1 -1
- package/lib/token-select/token.js +12 -2
- package/lib/token-select/token.js.map +1 -1
- package/package.json +3 -3
- package/src/text-select.jsx +4 -1
- package/src/token-select/index.jsx +11 -5
- package/src/token-select/token.jsx +12 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,38 @@
|
|
|
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
|
+
## [1.8.12](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.8.11...@pie-lib/text-select@1.8.12) (2022-02-03)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @pie-lib/text-select
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [1.8.11](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.8.10...@pie-lib/text-select@1.8.11) (2021-12-13)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @pie-lib/text-select
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## [1.8.10](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.8.9...@pie-lib/text-select@1.8.10) (2021-11-29)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @pie-lib/text-select
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
## [1.8.9](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.8.8...@pie-lib/text-select@1.8.9) (2021-11-10)
|
|
31
|
+
|
|
32
|
+
**Note:** Version bump only for package @pie-lib/text-select
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
6
38
|
## [1.8.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.8.7...@pie-lib/text-select@1.8.8) (2021-10-04)
|
|
7
39
|
|
|
8
40
|
|
package/lib/text-select.js
CHANGED
|
@@ -97,7 +97,8 @@ function (_React$Component) {
|
|
|
97
97
|
selectedTokens = _this$props.selectedTokens,
|
|
98
98
|
className = _this$props.className,
|
|
99
99
|
highlightChoices = _this$props.highlightChoices,
|
|
100
|
-
maxNoOfSelections = _this$props.maxNoOfSelections
|
|
100
|
+
maxNoOfSelections = _this$props.maxNoOfSelections,
|
|
101
|
+
animationsDisabled = _this$props.animationsDisabled;
|
|
101
102
|
var normalized = (0, _builder.normalize)(text, tokens);
|
|
102
103
|
log('normalized: ', normalized);
|
|
103
104
|
var prepped = normalized.map(function (t) {
|
|
@@ -118,7 +119,8 @@ function (_React$Component) {
|
|
|
118
119
|
tokens: prepped,
|
|
119
120
|
disabled: disabled,
|
|
120
121
|
onChange: this.change,
|
|
121
|
-
maxNoOfSelections: maxNoOfSelections
|
|
122
|
+
maxNoOfSelections: maxNoOfSelections,
|
|
123
|
+
animationsDisabled: animationsDisabled
|
|
122
124
|
});
|
|
123
125
|
}
|
|
124
126
|
}]);
|
|
@@ -136,6 +138,7 @@ _defineProperty(TextSelect, "propTypes", {
|
|
|
136
138
|
text: _propTypes["default"].string.isRequired,
|
|
137
139
|
className: _propTypes["default"].string,
|
|
138
140
|
highlightChoices: _propTypes["default"].bool,
|
|
141
|
+
animationsDisabled: _propTypes["default"].bool,
|
|
139
142
|
maxNoOfSelections: _propTypes["default"].number
|
|
140
143
|
});
|
|
141
144
|
//# sourceMappingURL=text-select.js.map
|
package/lib/text-select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/text-select.jsx"],"names":["log","TextSelect","tokens","onChange","props","out","filter","t","selected","map","start","end","text","disabled","selectedTokens","className","highlightChoices","maxNoOfSelections","normalized","prepped","selectedIndex","findIndex","s","correct","undefined","selectable","predefined","change","React","Component","PropTypes","func","bool","arrayOf","shape","TokenTypes","isRequired","string","number"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,IAAMA,GAAG,GAAG,uBAAM,sBAAN,CAAZ;AACA;;;;IAGqBC,U;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/text-select.jsx"],"names":["log","TextSelect","tokens","onChange","props","out","filter","t","selected","map","start","end","text","disabled","selectedTokens","className","highlightChoices","maxNoOfSelections","animationsDisabled","normalized","prepped","selectedIndex","findIndex","s","correct","undefined","selectable","predefined","change","React","Component","PropTypes","func","bool","arrayOf","shape","TokenTypes","isRequired","string","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport TokenSelect from './token-select';\nimport { normalize } from './tokenizer/builder';\nimport { TokenTypes } from './token-select/token';\nimport debug from 'debug';\nconst log = debug('@pie-lib:text-select');\n/**\n * Built on TokenSelect uses build.normalize to build the token set.\n */\nexport default class TextSelect extends React.Component {\n static propTypes = {\n onChange: PropTypes.func,\n disabled: PropTypes.bool,\n tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,\n selectedTokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,\n text: PropTypes.string.isRequired,\n className: PropTypes.string,\n highlightChoices: PropTypes.bool,\n animationsDisabled: PropTypes.bool,\n maxNoOfSelections: PropTypes.number\n };\n\n change = tokens => {\n const { onChange } = this.props;\n\n if (!onChange) {\n return;\n }\n const out = tokens.filter(t => t.selected).map(t => ({ start: t.start, end: t.end }));\n\n onChange(out);\n };\n\n render() {\n const {\n text,\n disabled,\n tokens,\n selectedTokens,\n className,\n highlightChoices,\n maxNoOfSelections,\n animationsDisabled\n } = this.props;\n\n const normalized = normalize(text, tokens);\n log('normalized: ', normalized);\n const prepped = normalized.map(t => {\n const selectedIndex = selectedTokens.findIndex(s => {\n return s.start === t.start && s.end === t.end;\n });\n const selected = selectedIndex !== -1;\n const correct = selected ? t.correct : undefined;\n return {\n ...t,\n selectable: !disabled && t.predefined,\n selected,\n correct\n };\n });\n\n return (\n <TokenSelect\n highlightChoices={!disabled && highlightChoices}\n className={className}\n tokens={prepped}\n disabled={disabled}\n onChange={this.change}\n maxNoOfSelections={maxNoOfSelections}\n animationsDisabled={animationsDisabled}\n />\n );\n }\n}\n"],"file":"text-select.js"}
|
|
@@ -94,16 +94,18 @@ function (_React$Component) {
|
|
|
94
94
|
|
|
95
95
|
_defineProperty(_assertThisInitialized(_this), "toggleToken", function (event) {
|
|
96
96
|
var target = event.target;
|
|
97
|
-
var
|
|
97
|
+
var _this$props = _this.props,
|
|
98
|
+
tokens = _this$props.tokens,
|
|
99
|
+
animationsDisabled = _this$props.animationsDisabled;
|
|
98
100
|
var tokensCloned = (0, _clone["default"])(tokens);
|
|
99
101
|
var targetSpanWrapper = target.closest(".".concat(_token["default"].rootClassName));
|
|
100
102
|
var targetedTokenIndex = targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;
|
|
101
103
|
var t = targetedTokenIndex && tokensCloned[targetedTokenIndex];
|
|
102
104
|
|
|
103
|
-
if (t && t.correct === undefined) {
|
|
104
|
-
var _this$
|
|
105
|
-
onChange = _this$
|
|
106
|
-
maxNoOfSelections = _this$
|
|
105
|
+
if (t && t.correct === undefined && !animationsDisabled) {
|
|
106
|
+
var _this$props2 = _this.props,
|
|
107
|
+
onChange = _this$props2.onChange,
|
|
108
|
+
maxNoOfSelections = _this$props2.maxNoOfSelections;
|
|
107
109
|
var selected = !t.selected;
|
|
108
110
|
|
|
109
111
|
if (maxNoOfSelections === 1 && _this.selectedCount() === 1) {
|
|
@@ -145,10 +147,11 @@ function (_React$Component) {
|
|
|
145
147
|
});
|
|
146
148
|
|
|
147
149
|
_defineProperty(_assertThisInitialized(_this), "generateTokensInHtml", function () {
|
|
148
|
-
var _this$
|
|
149
|
-
tokens = _this$
|
|
150
|
-
disabled = _this$
|
|
151
|
-
highlightChoices = _this$
|
|
150
|
+
var _this$props3 = _this.props,
|
|
151
|
+
tokens = _this$props3.tokens,
|
|
152
|
+
disabled = _this$props3.disabled,
|
|
153
|
+
highlightChoices = _this$props3.highlightChoices,
|
|
154
|
+
animationsDisabled = _this$props3.animationsDisabled;
|
|
152
155
|
|
|
153
156
|
var selectedCount = _this.selectedCount();
|
|
154
157
|
|
|
@@ -172,19 +175,20 @@ function (_React$Component) {
|
|
|
172
175
|
|
|
173
176
|
if (isLineBreak(t.text)) {
|
|
174
177
|
return finalAcc + '<br>';
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
if (selectable && !disabled || showCorrectAnswer || t.selected || animationsDisabled && t.predefined // if we are in print mode
|
|
181
|
+
) {
|
|
182
|
+
return finalAcc + (0, _server.renderToString)(_react["default"].createElement(_token["default"], _extends({
|
|
183
|
+
key: index,
|
|
184
|
+
disabled: disabled,
|
|
185
|
+
index: index
|
|
186
|
+
}, t, {
|
|
187
|
+
selectable: selectable,
|
|
188
|
+
highlight: highlightChoices,
|
|
189
|
+
animationsDisabled: animationsDisabled
|
|
190
|
+
})));
|
|
191
|
+
} else {
|
|
188
192
|
return accumulator + t.text;
|
|
189
193
|
}
|
|
190
194
|
};
|
|
@@ -199,9 +203,9 @@ function (_React$Component) {
|
|
|
199
203
|
_createClass(TokenSelect, [{
|
|
200
204
|
key: "render",
|
|
201
205
|
value: function render() {
|
|
202
|
-
var _this$
|
|
203
|
-
classes = _this$
|
|
204
|
-
classNameProp = _this$
|
|
206
|
+
var _this$props4 = this.props,
|
|
207
|
+
classes = _this$props4.classes,
|
|
208
|
+
classNameProp = _this$props4.className;
|
|
205
209
|
var className = (0, _classnames["default"])(classes.tokenSelect, classNameProp);
|
|
206
210
|
var html = this.generateTokensInHtml();
|
|
207
211
|
return _react["default"].createElement("div", {
|
|
@@ -226,6 +230,7 @@ _defineProperty(TokenSelect, "propTypes", {
|
|
|
226
230
|
onChange: _propTypes["default"].func.isRequired,
|
|
227
231
|
disabled: _propTypes["default"].bool,
|
|
228
232
|
highlightChoices: _propTypes["default"].bool,
|
|
233
|
+
animationsDisabled: _propTypes["default"].bool,
|
|
229
234
|
maxNoOfSelections: _propTypes["default"].number
|
|
230
235
|
});
|
|
231
236
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/token-select/index.jsx"],"names":["log","TokenSelect","props","tokens","filter","t","selected","length","selectedCount","maxNoOfSelections","isFinite","event","target","tokensCloned","targetSpanWrapper","closest","Token","rootClassName","targetedTokenIndex","dataset","indexkey","correct","undefined","onChange","selectedToken","updatedTokens","map","token","selectable","update","splice","disabled","highlightChoices","isLineBreak","text","isNewParagraph","reducer","accumulator","index","canSelectMore","showCorrectAnswer","finalAcc","reduceResult","reduce","classes","classNameProp","className","tokenSelect","html","generateTokensInHtml","__html","toggleToken","React","Component","PropTypes","arrayOf","shape","TokenTypes","isRequired","string","object","func","bool","number","backgroundColor","whiteSpace"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Token, { TokenTypes } from './token';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport clone from 'lodash/clone';\nimport debug from 'debug';\nimport { noSelect } from '@pie-lib/style-utils';\nimport { renderToString } from 'react-dom/server';\nimport isEqual from 'lodash/isEqual';\n\nconst log = debug('@pie-lib:text-select:token-select');\n\nexport class TokenSelect extends React.Component {\n static propTypes = {\n tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,\n className: PropTypes.string,\n classes: PropTypes.object.isRequired,\n onChange: PropTypes.func.isRequired,\n disabled: PropTypes.bool,\n highlightChoices: PropTypes.bool,\n maxNoOfSelections: PropTypes.number\n };\n\n static defaultProps = {\n highlightChoices: false,\n maxNoOfSelections: 0,\n tokens: []\n };\n\n selectedCount = () => this.props.tokens.filter(t => t.selected).length;\n\n canSelectMore = selectedCount => {\n const { maxNoOfSelections } = this.props;\n\n if (maxNoOfSelections === 1) {\n return true;\n }\n\n log('[canSelectMore] maxNoOfSelections: ', maxNoOfSelections, 'selectedCount: ', selectedCount);\n return (\n maxNoOfSelections <= 0 || (isFinite(maxNoOfSelections) && selectedCount < maxNoOfSelections)\n );\n };\n\n /**\n @function\n @param { object } event\n\n @description\n each token is wrapped into a span that has Token.rootClassName class and indexkey attribute (represents the index of the token)\n tokens are updated with the targeted token having the correct value set for 'selected' property\n */\n toggleToken = event => {\n const { target } = event;\n const { tokens } = this.props;\n const tokensCloned = clone(tokens);\n const targetSpanWrapper = target.closest(`.${Token.rootClassName}`);\n const targetedTokenIndex =\n targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;\n const t = targetedTokenIndex && tokensCloned[targetedTokenIndex];\n\n if (t && t.correct === undefined) {\n const { onChange, maxNoOfSelections } = this.props;\n const selected = !t.selected;\n\n if (maxNoOfSelections === 1 && this.selectedCount() === 1) {\n const selectedToken = (tokens || []).filter(t => t.selected);\n\n const updatedTokens = tokensCloned.map(token => {\n if (isEqual(token, selectedToken[0])) {\n return { ...token, selected: false };\n }\n\n return { ...token, selectable: true };\n });\n\n const update = { ...t, selected: !t.selected };\n\n updatedTokens.splice(targetedTokenIndex, 1, update);\n onChange(updatedTokens);\n } else {\n if (selected && maxNoOfSelections > 0 && this.selectedCount() >= maxNoOfSelections) {\n log('skip toggle max reached');\n return;\n }\n\n const update = { ...t, selected: !t.selected };\n\n tokensCloned.splice(targetedTokenIndex, 1, update);\n onChange(tokensCloned);\n }\n }\n };\n\n generateTokensInHtml = () => {\n const { tokens, disabled, highlightChoices } = this.props;\n const selectedCount = this.selectedCount();\n const isLineBreak = text => text === '\\n';\n const isNewParagraph = text => text === '\\n\\n';\n\n const reducer = (accumulator, t, index) => {\n const selectable = t.selected || (t.selectable && this.canSelectMore(selectedCount));\n const showCorrectAnswer = t.correct !== undefined && (t.selectable || t.selected);\n let finalAcc = accumulator;\n\n if (isNewParagraph(t.text)) {\n return finalAcc + '</p><p>';\n }\n\n if (isLineBreak(t.text)) {\n return finalAcc + '<br>';\n }\n\n //modified (selectable && !disabled) to !disabled to fix PD-646\n if (!disabled || showCorrectAnswer || t.selected) {\n return (\n finalAcc +\n renderToString(\n <Token\n key={index}\n disabled={disabled}\n index={index}\n {...t}\n selectable={selectable}\n highlight={highlightChoices}\n />\n )\n );\n } else {\n return accumulator + t.text;\n }\n };\n\n const reduceResult = (tokens || []).reduce(reducer, '<p>');\n\n return reduceResult + '</p>';\n };\n\n render() {\n const { classes, className: classNameProp } = this.props;\n const className = classNames(classes.tokenSelect, classNameProp);\n const html = this.generateTokensInHtml();\n\n return (\n <div\n className={className}\n dangerouslySetInnerHTML={{ __html: html }}\n onClick={this.toggleToken}\n />\n );\n }\n}\n\nexport default withStyles(() => ({\n tokenSelect: {\n backgroundColor: 'none',\n whiteSpace: 'pre',\n ...noSelect(),\n '& p': {\n whiteSpace: 'break-spaces'\n }\n }\n}))(TokenSelect);\n"],"file":"index.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/token-select/index.jsx"],"names":["log","TokenSelect","props","tokens","filter","t","selected","length","selectedCount","maxNoOfSelections","isFinite","event","target","animationsDisabled","tokensCloned","targetSpanWrapper","closest","Token","rootClassName","targetedTokenIndex","dataset","indexkey","correct","undefined","onChange","selectedToken","updatedTokens","map","token","selectable","update","splice","disabled","highlightChoices","isLineBreak","text","isNewParagraph","reducer","accumulator","index","canSelectMore","showCorrectAnswer","finalAcc","predefined","reduceResult","reduce","classes","classNameProp","className","tokenSelect","html","generateTokensInHtml","__html","toggleToken","React","Component","PropTypes","arrayOf","shape","TokenTypes","isRequired","string","object","func","bool","number","backgroundColor","whiteSpace"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Token, { TokenTypes } from './token';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport clone from 'lodash/clone';\nimport debug from 'debug';\nimport { noSelect } from '@pie-lib/style-utils';\nimport { renderToString } from 'react-dom/server';\nimport isEqual from 'lodash/isEqual';\n\nconst log = debug('@pie-lib:text-select:token-select');\n\nexport class TokenSelect extends React.Component {\n static propTypes = {\n tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,\n className: PropTypes.string,\n classes: PropTypes.object.isRequired,\n onChange: PropTypes.func.isRequired,\n disabled: PropTypes.bool,\n highlightChoices: PropTypes.bool,\n animationsDisabled: PropTypes.bool,\n maxNoOfSelections: PropTypes.number\n };\n\n static defaultProps = {\n highlightChoices: false,\n maxNoOfSelections: 0,\n tokens: []\n };\n\n selectedCount = () => this.props.tokens.filter(t => t.selected).length;\n\n canSelectMore = selectedCount => {\n const { maxNoOfSelections } = this.props;\n\n if (maxNoOfSelections === 1) {\n return true;\n }\n\n log('[canSelectMore] maxNoOfSelections: ', maxNoOfSelections, 'selectedCount: ', selectedCount);\n return (\n maxNoOfSelections <= 0 || (isFinite(maxNoOfSelections) && selectedCount < maxNoOfSelections)\n );\n };\n\n /**\n @function\n @param { object } event\n\n @description\n each token is wrapped into a span that has Token.rootClassName class and indexkey attribute (represents the index of the token)\n tokens are updated with the targeted token having the correct value set for 'selected' property\n */\n toggleToken = event => {\n const { target } = event;\n const { tokens, animationsDisabled } = this.props;\n const tokensCloned = clone(tokens);\n const targetSpanWrapper = target.closest(`.${Token.rootClassName}`);\n const targetedTokenIndex =\n targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;\n const t = targetedTokenIndex && tokensCloned[targetedTokenIndex];\n\n if (t && t.correct === undefined && !animationsDisabled) {\n const { onChange, maxNoOfSelections } = this.props;\n const selected = !t.selected;\n\n if (maxNoOfSelections === 1 && this.selectedCount() === 1) {\n const selectedToken = (tokens || []).filter(t => t.selected);\n\n const updatedTokens = tokensCloned.map(token => {\n if (isEqual(token, selectedToken[0])) {\n return { ...token, selected: false };\n }\n\n return { ...token, selectable: true };\n });\n\n const update = { ...t, selected: !t.selected };\n\n updatedTokens.splice(targetedTokenIndex, 1, update);\n onChange(updatedTokens);\n } else {\n if (selected && maxNoOfSelections > 0 && this.selectedCount() >= maxNoOfSelections) {\n log('skip toggle max reached');\n return;\n }\n\n const update = { ...t, selected: !t.selected };\n\n tokensCloned.splice(targetedTokenIndex, 1, update);\n onChange(tokensCloned);\n }\n }\n };\n\n generateTokensInHtml = () => {\n const { tokens, disabled, highlightChoices, animationsDisabled } = this.props;\n const selectedCount = this.selectedCount();\n const isLineBreak = text => text === '\\n';\n const isNewParagraph = text => text === '\\n\\n';\n\n const reducer = (accumulator, t, index) => {\n const selectable = t.selected || (t.selectable && this.canSelectMore(selectedCount));\n const showCorrectAnswer = t.correct !== undefined && (t.selectable || t.selected);\n let finalAcc = accumulator;\n\n if (isNewParagraph(t.text)) {\n return finalAcc + '</p><p>';\n }\n\n if (isLineBreak(t.text)) {\n return finalAcc + '<br>';\n }\n\n if (\n (selectable && !disabled) ||\n showCorrectAnswer ||\n t.selected ||\n (animationsDisabled && t.predefined) // if we are in print mode\n ) {\n return (\n finalAcc +\n renderToString(\n <Token\n key={index}\n disabled={disabled}\n index={index}\n {...t}\n selectable={selectable}\n highlight={highlightChoices}\n animationsDisabled={animationsDisabled}\n />\n )\n );\n } else {\n return accumulator + t.text;\n }\n };\n\n const reduceResult = (tokens || []).reduce(reducer, '<p>');\n\n return reduceResult + '</p>';\n };\n\n render() {\n const { classes, className: classNameProp } = this.props;\n const className = classNames(classes.tokenSelect, classNameProp);\n const html = this.generateTokensInHtml();\n\n return (\n <div\n className={className}\n dangerouslySetInnerHTML={{ __html: html }}\n onClick={this.toggleToken}\n />\n );\n }\n}\n\nexport default withStyles(() => ({\n tokenSelect: {\n backgroundColor: 'none',\n whiteSpace: 'pre',\n ...noSelect(),\n '& p': {\n whiteSpace: 'break-spaces'\n }\n }\n}))(TokenSelect);\n"],"file":"index.js"}
|
|
@@ -70,7 +70,8 @@ function (_React$Component) {
|
|
|
70
70
|
disabled = _this$props.disabled,
|
|
71
71
|
index = _this$props.index,
|
|
72
72
|
highlight = _this$props.highlight,
|
|
73
|
-
correct = _this$props.correct
|
|
73
|
+
correct = _this$props.correct,
|
|
74
|
+
animationsDisabled = _this$props.animationsDisabled;
|
|
74
75
|
var className;
|
|
75
76
|
|
|
76
77
|
if (correct === undefined && selected && disabled) {
|
|
@@ -78,7 +79,7 @@ function (_React$Component) {
|
|
|
78
79
|
} else if (correct !== undefined) {
|
|
79
80
|
className = (0, _classnames["default"])(Token.rootClassName, classes.custom, correct === true && classes.correct, correct === false && classes.incorrect);
|
|
80
81
|
} else {
|
|
81
|
-
className = (0, _classnames["default"])(Token.rootClassName, classes.token, disabled && classes.disabled, selectable && !disabled && classes.selectable, selected && !disabled && classes.selected, selected && disabled && classes.disabledAndSelected, highlight && selectable && !disabled && !selected && classes.highlight, classNameProp);
|
|
82
|
+
className = (0, _classnames["default"])(Token.rootClassName, classes.token, disabled && classes.disabled, selectable && !disabled && classes.selectable, selected && !disabled && classes.selected, selected && disabled && classes.disabledAndSelected, highlight && selectable && !disabled && !selected && classes.highlight, animationsDisabled && classes.print, classNameProp);
|
|
82
83
|
}
|
|
83
84
|
|
|
84
85
|
return _react["default"].createElement("span", {
|
|
@@ -162,6 +163,15 @@ var _default = (0, _styles.withStyles)(function (theme) {
|
|
|
162
163
|
display: 'inline-block',
|
|
163
164
|
padding: theme.spacing.unit
|
|
164
165
|
},
|
|
166
|
+
print: {
|
|
167
|
+
border: 'dashed 2px gray',
|
|
168
|
+
lineHeight: 2,
|
|
169
|
+
boxSizing: 'border-box',
|
|
170
|
+
marginTop: theme.spacing.unit / 2,
|
|
171
|
+
display: 'inline-block',
|
|
172
|
+
padding: theme.spacing.unit,
|
|
173
|
+
color: _renderUi.color.text()
|
|
174
|
+
},
|
|
165
175
|
custom: {
|
|
166
176
|
display: 'initial'
|
|
167
177
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/token-select/token.jsx"],"names":["TokenTypes","text","PropTypes","string","selectable","bool","Token","props","selected","classes","classNameProp","className","disabled","index","highlight","correct","undefined","token","disabledBlack","rootClassName","custom","incorrect","disabledAndSelected","__html","replace","React","Component","object","isRequired","theme","cursor","textIndent","padding","spacing","unit","paddingRight","paddingLeft","transition","color","backgroundColor","primaryLight","lineHeight","marginTop","border","boxSizing","display"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,IAAMA,UAAU,GAAG;AACxBC,EAAAA,IAAI,EAAEC,sBAAUC,MADQ;AAExBC,EAAAA,UAAU,EAAEF,sBAAUG;AAFE,CAAnB;;;IAKMC,K;;;;;;;;;;;;;6BAkBF;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/token-select/token.jsx"],"names":["TokenTypes","text","PropTypes","string","selectable","bool","Token","props","selected","classes","classNameProp","className","disabled","index","highlight","correct","animationsDisabled","undefined","token","disabledBlack","rootClassName","custom","incorrect","disabledAndSelected","print","__html","replace","React","Component","object","isRequired","theme","cursor","textIndent","padding","spacing","unit","paddingRight","paddingLeft","transition","color","backgroundColor","primaryLight","lineHeight","marginTop","border","boxSizing","display"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { color } from '@pie-lib/render-ui';\n\nexport const TokenTypes = {\n text: PropTypes.string,\n selectable: PropTypes.bool\n};\n\nexport class Token extends React.Component {\n static rootClassName = 'tokenRootClass';\n\n static propTypes = {\n ...TokenTypes,\n classes: PropTypes.object.isRequired,\n className: PropTypes.string,\n disabled: PropTypes.bool,\n highlight: PropTypes.bool,\n correct: PropTypes.bool,\n text: PropTypes.string.isRequired\n };\n\n static defaultProps = {\n selectable: false,\n text: ''\n };\n\n render() {\n const {\n text,\n selectable,\n selected,\n classes,\n className: classNameProp,\n disabled,\n index,\n highlight,\n correct,\n animationsDisabled\n } = this.props;\n\n let className;\n\n if (correct === undefined && selected && disabled) {\n className = classNames(classes.token, classes.selected, classes.disabledBlack);\n } else if (correct !== undefined) {\n className = classNames(\n Token.rootClassName,\n classes.custom,\n correct === true && classes.correct,\n correct === false && classes.incorrect\n );\n } else {\n className = classNames(\n Token.rootClassName,\n classes.token,\n disabled && classes.disabled,\n selectable && !disabled && classes.selectable,\n selected && !disabled && classes.selected,\n selected && disabled && classes.disabledAndSelected,\n highlight && selectable && !disabled && !selected && classes.highlight,\n animationsDisabled && classes.print,\n classNameProp\n );\n }\n\n return (\n <span\n className={className}\n dangerouslySetInnerHTML={{ __html: (text || '').replace(/\\n/g, '<br>') }}\n data-indexkey={index}\n />\n );\n }\n}\n\nexport default withStyles(theme => {\n return {\n token: {\n cursor: 'pointer',\n textIndent: 0,\n padding: theme.spacing.unit / 2,\n paddingRight: 0,\n paddingLeft: 0,\n transition: 'background-color 100ms ease-in'\n },\n disabled: {\n cursor: 'inherit',\n color: 'grey' // TODO hardcoded color\n },\n disabledBlack: {\n cursor: 'inherit'\n },\n disabledAndSelected: {\n backgroundColor: 'pink' // TODO hardcoded color\n },\n selectable: {\n '&:hover': {\n backgroundColor: color.primaryLight(),\n '& > *': {\n backgroundColor: color.primaryLight()\n }\n }\n },\n selected: {\n lineHeight: 2,\n marginTop: theme.spacing.unit / 2,\n '&:hover': {\n backgroundColor: color.primaryLight()\n },\n backgroundColor: color.primaryLight(),\n '& > *': {\n backgroundColor: color.primaryLight()\n }\n },\n highlight: {\n // TODO hardcoded color,\n border: 'dashed 2px gray',\n lineHeight: 2,\n boxSizing: 'border-box',\n marginTop: theme.spacing.unit / 2,\n display: 'inline-block',\n padding: theme.spacing.unit\n },\n print: {\n border: 'dashed 2px gray',\n lineHeight: 2,\n boxSizing: 'border-box',\n marginTop: theme.spacing.unit / 2,\n display: 'inline-block',\n padding: theme.spacing.unit,\n color: color.text()\n },\n\n custom: {\n display: 'initial'\n },\n correct: {\n backgroundColor: color.correct()\n },\n incorrect: {\n backgroundColor: color.incorrect()\n }\n };\n})(Token);\n"],"file":"token.js"}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
|
-
"version": "1.8.
|
|
6
|
+
"version": "1.8.12",
|
|
7
7
|
"description": "Some react components for text selection",
|
|
8
8
|
"keywords": [
|
|
9
9
|
"react",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"license": "ISC",
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"@pie-framework/parse-english": "^1.0.0",
|
|
21
|
-
"@pie-lib/render-ui": "^4.12.
|
|
21
|
+
"@pie-lib/render-ui": "^4.12.4",
|
|
22
22
|
"@pie-lib/style-utils": "^0.1.25",
|
|
23
23
|
"classnames": "^2.2.6",
|
|
24
24
|
"debug": "^4.1.1",
|
|
@@ -38,6 +38,6 @@
|
|
|
38
38
|
"@material-ui/core": "^3.8.3",
|
|
39
39
|
"react": "^16.8.1"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "c90d1720326d841b073a96a1e25033dc7d62d061",
|
|
42
42
|
"scripts": {}
|
|
43
43
|
}
|
package/src/text-select.jsx
CHANGED
|
@@ -18,6 +18,7 @@ export default class TextSelect extends React.Component {
|
|
|
18
18
|
text: PropTypes.string.isRequired,
|
|
19
19
|
className: PropTypes.string,
|
|
20
20
|
highlightChoices: PropTypes.bool,
|
|
21
|
+
animationsDisabled: PropTypes.bool,
|
|
21
22
|
maxNoOfSelections: PropTypes.number
|
|
22
23
|
};
|
|
23
24
|
|
|
@@ -40,7 +41,8 @@ export default class TextSelect extends React.Component {
|
|
|
40
41
|
selectedTokens,
|
|
41
42
|
className,
|
|
42
43
|
highlightChoices,
|
|
43
|
-
maxNoOfSelections
|
|
44
|
+
maxNoOfSelections,
|
|
45
|
+
animationsDisabled
|
|
44
46
|
} = this.props;
|
|
45
47
|
|
|
46
48
|
const normalized = normalize(text, tokens);
|
|
@@ -67,6 +69,7 @@ export default class TextSelect extends React.Component {
|
|
|
67
69
|
disabled={disabled}
|
|
68
70
|
onChange={this.change}
|
|
69
71
|
maxNoOfSelections={maxNoOfSelections}
|
|
72
|
+
animationsDisabled={animationsDisabled}
|
|
70
73
|
/>
|
|
71
74
|
);
|
|
72
75
|
}
|
|
@@ -19,6 +19,7 @@ export class TokenSelect extends React.Component {
|
|
|
19
19
|
onChange: PropTypes.func.isRequired,
|
|
20
20
|
disabled: PropTypes.bool,
|
|
21
21
|
highlightChoices: PropTypes.bool,
|
|
22
|
+
animationsDisabled: PropTypes.bool,
|
|
22
23
|
maxNoOfSelections: PropTypes.number
|
|
23
24
|
};
|
|
24
25
|
|
|
@@ -53,14 +54,14 @@ export class TokenSelect extends React.Component {
|
|
|
53
54
|
*/
|
|
54
55
|
toggleToken = event => {
|
|
55
56
|
const { target } = event;
|
|
56
|
-
const { tokens } = this.props;
|
|
57
|
+
const { tokens, animationsDisabled } = this.props;
|
|
57
58
|
const tokensCloned = clone(tokens);
|
|
58
59
|
const targetSpanWrapper = target.closest(`.${Token.rootClassName}`);
|
|
59
60
|
const targetedTokenIndex =
|
|
60
61
|
targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;
|
|
61
62
|
const t = targetedTokenIndex && tokensCloned[targetedTokenIndex];
|
|
62
63
|
|
|
63
|
-
if (t && t.correct === undefined) {
|
|
64
|
+
if (t && t.correct === undefined && !animationsDisabled) {
|
|
64
65
|
const { onChange, maxNoOfSelections } = this.props;
|
|
65
66
|
const selected = !t.selected;
|
|
66
67
|
|
|
@@ -94,7 +95,7 @@ export class TokenSelect extends React.Component {
|
|
|
94
95
|
};
|
|
95
96
|
|
|
96
97
|
generateTokensInHtml = () => {
|
|
97
|
-
const { tokens, disabled, highlightChoices } = this.props;
|
|
98
|
+
const { tokens, disabled, highlightChoices, animationsDisabled } = this.props;
|
|
98
99
|
const selectedCount = this.selectedCount();
|
|
99
100
|
const isLineBreak = text => text === '\n';
|
|
100
101
|
const isNewParagraph = text => text === '\n\n';
|
|
@@ -112,8 +113,12 @@ export class TokenSelect extends React.Component {
|
|
|
112
113
|
return finalAcc + '<br>';
|
|
113
114
|
}
|
|
114
115
|
|
|
115
|
-
|
|
116
|
-
|
|
116
|
+
if (
|
|
117
|
+
(selectable && !disabled) ||
|
|
118
|
+
showCorrectAnswer ||
|
|
119
|
+
t.selected ||
|
|
120
|
+
(animationsDisabled && t.predefined) // if we are in print mode
|
|
121
|
+
) {
|
|
117
122
|
return (
|
|
118
123
|
finalAcc +
|
|
119
124
|
renderToString(
|
|
@@ -124,6 +129,7 @@ export class TokenSelect extends React.Component {
|
|
|
124
129
|
{...t}
|
|
125
130
|
selectable={selectable}
|
|
126
131
|
highlight={highlightChoices}
|
|
132
|
+
animationsDisabled={animationsDisabled}
|
|
127
133
|
/>
|
|
128
134
|
)
|
|
129
135
|
);
|
|
@@ -37,7 +37,8 @@ export class Token extends React.Component {
|
|
|
37
37
|
disabled,
|
|
38
38
|
index,
|
|
39
39
|
highlight,
|
|
40
|
-
correct
|
|
40
|
+
correct,
|
|
41
|
+
animationsDisabled
|
|
41
42
|
} = this.props;
|
|
42
43
|
|
|
43
44
|
let className;
|
|
@@ -60,6 +61,7 @@ export class Token extends React.Component {
|
|
|
60
61
|
selected && !disabled && classes.selected,
|
|
61
62
|
selected && disabled && classes.disabledAndSelected,
|
|
62
63
|
highlight && selectable && !disabled && !selected && classes.highlight,
|
|
64
|
+
animationsDisabled && classes.print,
|
|
63
65
|
classNameProp
|
|
64
66
|
);
|
|
65
67
|
}
|
|
@@ -122,6 +124,15 @@ export default withStyles(theme => {
|
|
|
122
124
|
display: 'inline-block',
|
|
123
125
|
padding: theme.spacing.unit
|
|
124
126
|
},
|
|
127
|
+
print: {
|
|
128
|
+
border: 'dashed 2px gray',
|
|
129
|
+
lineHeight: 2,
|
|
130
|
+
boxSizing: 'border-box',
|
|
131
|
+
marginTop: theme.spacing.unit / 2,
|
|
132
|
+
display: 'inline-block',
|
|
133
|
+
padding: theme.spacing.unit,
|
|
134
|
+
color: color.text()
|
|
135
|
+
},
|
|
125
136
|
|
|
126
137
|
custom: {
|
|
127
138
|
display: 'initial'
|