@terraware/web-components 2.10.5 → 2.10.6-rc.0

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.
Files changed (9) hide show
  1. package/components/Textfield/Textfield.d.ts +8 -0
  2. package/components/Textfield/Textfield.d.ts.map +1 -1
  3. package/components/Textfield/Textfield.js +21 -5
  4. package/components/Textfield/TruncatedTextArea.d.ts +9 -0
  5. package/components/Textfield/TruncatedTextArea.d.ts.map +1 -0
  6. package/components/Textfield/TruncatedTextArea.js +76 -0
  7. package/package.json +1 -1
  8. package/stories/TextfieldNew.stories.d.ts +1 -0
  9. package/stories/TextfieldNew.stories.d.ts.map +1 -1
package/components/Textfield/Textfield.d.ts CHANGED
@@ -3,6 +3,13 @@ import { IconName } from '../Icon/icons';
3
3
  import './styles.scss';
4
4
  type TextfieldType = 'text' | 'textarea' | 'number';
5
5
  type Handler = (value: unknown) => void;
6
+ export interface TruncateConfig {
7
+ maxHeight: number;
8
+ showMoreText: string;
9
+ showLessText: string;
10
+ showTextStyle?: Record<string, any>;
11
+ valueTextStyle?: Record<string, any>;
12
+ }
6
13
  export interface Props {
7
14
  autoFocus?: boolean;
8
15
  onChange?: Handler;
@@ -29,6 +36,7 @@ export interface Props {
29
36
  disabledCharacters?: string[];
30
37
  preserveNewlines?: boolean;
31
38
  required?: boolean;
39
+ truncateConfig?: TruncateConfig;
32
40
  }
33
41
  export default function TextField(props: Props): JSX.Element;
34
42
  export {};
package/components/Textfield/Textfield.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Textfield.d.ts","sourceRoot":"","sources":["../../../src/components/Textfield/Textfield.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,eAAe,CAAC;AAIvB,KAAK,aAAa,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;AAEpD,KAAK,OAAO,GAAG,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAExC,MAAM,WAAW,KAAK;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA+I3D"}
1
+ {"version":3,"file":"Textfield.d.ts","sourceRoot":"","sources":["../../../src/components/Textfield/Textfield.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,eAAe,CAAC;AAKvB,KAAK,aAAa,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;AAEpD,KAAK,OAAO,GAAG,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAExC,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,KAAK;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA4J3D"}
package/components/Textfield/Textfield.js CHANGED
@@ -1,16 +1,18 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.default = TextField;
8
9
  var _classnames = _interopRequireDefault(require("classnames"));
9
- var _react = _interopRequireDefault(require("react"));
10
+ var _react = _interopRequireWildcard(require("react"));
10
11
  var _Icon = _interopRequireDefault(require("../Icon/Icon"));
11
12
  require("./styles.scss");
12
13
  var _utils = require("../../utils");
13
14
  var _IconTooltip = _interopRequireDefault(require("../IconTooltip"));
15
+ var _TruncatedTextArea = _interopRequireDefault(require("./TruncatedTextArea"));
14
16
  function TextField(props) {
15
17
  var value = props.value,
16
18
  autoFocus = props.autoFocus,
@@ -36,7 +38,8 @@ function TextField(props) {
36
38
  max = props.max,
37
39
  disabledCharacters = props.disabledCharacters,
38
40
  preserveNewlines = props.preserveNewlines,
39
- required = props.required;
41
+ required = props.required,
42
+ truncateConfig = props.truncateConfig;
40
43
  var textfieldClass = (0, _classnames.default)({
41
44
  'textfield-value': true,
42
45
  'textfield-value--disabled': disabled,
@@ -85,6 +88,21 @@ function TextField(props) {
85
88
  typeProps.max = max;
86
89
  }
87
90
  }
91
+ var displayComponent = (0, _react.useMemo)(function () {
92
+ if (!display) {
93
+ return null;
94
+ }
95
+ if (type === 'textarea' && truncateConfig) {
96
+ return /*#__PURE__*/_react.default.createElement(_TruncatedTextArea.default, {
97
+ preserveNewlines: preserveNewlines,
98
+ truncateConfig: truncateConfig,
99
+ value: value
100
+ });
101
+ }
102
+ return /*#__PURE__*/_react.default.createElement("p", {
103
+ className: "textfield-value--display".concat(preserveNewlines ? ' preserve-newlines' : '')
104
+ }, value);
105
+ }, [display, preserveNewlines, truncateConfig, type, value]);
88
106
  return /*#__PURE__*/_react.default.createElement("div", {
89
107
  className: "textfield ".concat(className)
90
108
  }, /*#__PURE__*/_react.default.createElement("label", {
@@ -120,9 +138,7 @@ function TextField(props) {
120
138
  onChange: textfieldOnChange,
121
139
  onBlur: onBlur,
122
140
  required: required
123
- })), display && /*#__PURE__*/_react.default.createElement("p", {
124
- className: "textfield-value--display".concat(preserveNewlines ? ' preserve-newlines' : '')
125
- }, value), errorText && /*#__PURE__*/_react.default.createElement("div", {
141
+ })), displayComponent, errorText && /*#__PURE__*/_react.default.createElement("div", {
126
142
  className: "textfield-label-container"
127
143
  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
128
144
  name: "error",
package/components/Textfield/TruncatedTextArea.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { TruncateConfig } from './Textfield';
2
+ interface TruncatedTextAreaProps {
3
+ preserveNewlines?: boolean;
4
+ truncateConfig: TruncateConfig;
5
+ value?: string | number;
6
+ }
7
+ declare const TruncatedTextArea: ({ preserveNewlines, truncateConfig, value }: TruncatedTextAreaProps) => JSX.Element;
8
+ export default TruncatedTextArea;
9
+ //# sourceMappingURL=TruncatedTextArea.d.ts.map
package/components/Textfield/TruncatedTextArea.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TruncatedTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/Textfield/TruncatedTextArea.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C,UAAU,sBAAsB;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,EAAE,cAAc,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,iBAAiB,gDAAiD,sBAAsB,gBAyD7F,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
package/components/Textfield/TruncatedTextArea.js ADDED
@@ -0,0 +1,76 @@
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
11
+ var _react = _interopRequireWildcard(require("react"));
12
+ var _material = require("@mui/material");
13
+ var TruncatedTextArea = function TruncatedTextArea(_ref) {
14
+ var preserveNewlines = _ref.preserveNewlines,
15
+ truncateConfig = _ref.truncateConfig,
16
+ value = _ref.value;
17
+ var maxHeight = truncateConfig.maxHeight,
18
+ showLessText = truncateConfig.showLessText,
19
+ showMoreText = truncateConfig.showMoreText,
20
+ showTextStyle = truncateConfig.showTextStyle,
21
+ valueTextStyle = truncateConfig.valueTextStyle;
22
+ var theme = (0, _material.useTheme)();
23
+ var _useState = (0, _react.useState)(false),
24
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
25
+ showAll = _useState2[0],
26
+ setShowAll = _useState2[1];
27
+ var _useState3 = (0, _react.useState)(false),
28
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
29
+ needsTruncating = _useState4[0],
30
+ setNeedsTruncating = _useState4[1];
31
+ var _useState5 = (0, _react.useState)(0),
32
+ _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
33
+ totalHeight = _useState6[0],
34
+ setTotalHeight = _useState6[1];
35
+ var ref = (0, _react.useRef)(null);
36
+ (0, _react.useEffect)(function () {
37
+ if (ref && ref.current && !totalHeight) {
38
+ var height = ref.current.clientHeight;
39
+ setTotalHeight(height);
40
+ setNeedsTruncating(height > maxHeight);
41
+ }
42
+ }, [maxHeight, ref, totalHeight]);
43
+ var toggleShowAll = function toggleShowAll() {
44
+ return setShowAll(function (prev) {
45
+ return !prev;
46
+ });
47
+ };
48
+ var textStyle = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, valueTextStyle), {}, {
49
+ margin: '8px 0',
50
+ padding: 0,
51
+ overflow: 'hidden',
52
+ width: '100%'
53
+ });
54
+ if (!showAll) {
55
+ textStyle.maxHeight = "".concat(maxHeight, "px");
56
+ }
57
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
58
+ ref: ref,
59
+ className: "textfield-value--display".concat(preserveNewlines ? ' preserve-newlines' : ''),
60
+ style: textStyle
61
+ }, value), needsTruncating && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_material.Link, {
62
+ component: "button",
63
+ onClick: toggleShowAll,
64
+ onBlur: toggleShowAll,
65
+ sx: {
66
+ color: theme.palette.TwClrTxtBrand,
67
+ textDecorationColor: "".concat(theme.palette.TwClrTxtBrand, "80")
68
+ }
69
+ }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
70
+ sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, showTextStyle), {}, {
71
+ marginTop: '-3px'
72
+ })
73
+ }, showAll ? showLessText : showMoreText))));
74
+ };
75
+ var _default = TruncatedTextArea;
76
+ exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@terraware/web-components",
3
- "version": "2.10.5",
3
+ "version": "2.10.6-rc.0",
4
4
  "author": "Terraformation Inc.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/stories/TextfieldNew.stories.d.ts CHANGED
@@ -27,5 +27,6 @@ export default _default;
27
27
  export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TextFieldProps>;
28
28
  export declare const WithTooltip: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TextFieldProps>;
29
29
  export declare const TextArea: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TextFieldProps>;
30
+ export declare const TextAreaWithTruncate: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TextFieldProps>;
30
31
  export declare const NumberField: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TextFieldProps>;
31
32
  //# sourceMappingURL=TextfieldNew.stories.d.ts.map
package/stories/TextfieldNew.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextfieldNew.stories.d.ts","sourceRoot":"","sources":["../../src/stories/TextfieldNew.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,SAAS,EAAE,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;AAEvF,wBAiBE;AA4BF,eAAO,MAAM,OAAO,+GAAoB,CAAC;AAEzC,eAAO,MAAM,WAAW,+GAAoB,CAAC;AAE7C,eAAO,MAAM,QAAQ,+GAAoB,CAAC;AAE1C,eAAO,MAAM,WAAW,+GAA0B,CAAC"}
1
+ {"version":3,"file":"TextfieldNew.stories.d.ts","sourceRoot":"","sources":["../../src/stories/TextfieldNew.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,SAAS,EAAE,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;AAEvF,wBAiBE;AA4BF,eAAO,MAAM,OAAO,+GAAoB,CAAC;AAEzC,eAAO,MAAM,WAAW,+GAAoB,CAAC;AAE7C,eAAO,MAAM,QAAQ,+GAAoB,CAAC;AAE1C,eAAO,MAAM,oBAAoB,+GAAoB,CAAC;AAEtD,eAAO,MAAM,WAAW,+GAA0B,CAAC"}