oa-componentbook 1.0.1-stage.426 → 1.0.1-stage.428

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 (5) hide show
  1. package/build/components/oa-component-table/CustomTableV1.js +1 -0
  2. package/build/components/oa-component-textarea/CustomTextArea.js +103 -8
  3. package/build/components/oa-component-textarea/constants.js +39 -0
  4. package/build/components/oa-component-textarea/styles.js +12 -3
  5. package/package.json +1 -1
package/build/components/oa-component-table/CustomTableV1.js CHANGED
@@ -245,6 +245,7 @@ function CustomTableV1(_ref2) {
245
245
  return /*#__PURE__*/_react.default.createElement("div", {
246
246
  key: idx
247
247
  }, (option === null || option === void 0 ? void 0 : option.type) === "button" ? /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
248
+ disabled: (record === null || record === void 0 ? void 0 : record[option === null || option === void 0 ? void 0 : option.disabled]) || false,
248
249
  type: (option === null || option === void 0 ? void 0 : option.subType) || "primary",
249
250
  label: (option === null || option === void 0 ? void 0 : option.label) || (record === null || record === void 0 ? void 0 : record[option === null || option === void 0 ? void 0 : option.key]) || "",
250
251
  onClick: () => customTableChange(record, config)
package/build/components/oa-component-textarea/CustomTextArea.js CHANGED
@@ -1,16 +1,24 @@
1
1
  "use strict";
2
2
 
3
3
  require("core-js/modules/es.object.assign.js");
4
+ require("core-js/modules/es.weak-map.js");
5
+ require("core-js/modules/web.dom-collections.iterator.js");
4
6
  Object.defineProperty(exports, "__esModule", {
5
7
  value: true
6
8
  });
7
9
  exports.default = void 0;
10
+ require("core-js/modules/es.string.trim.js");
8
11
  var _react = _interopRequireDefault(require("react"));
9
12
  var _propTypes = _interopRequireDefault(require("prop-types"));
10
13
  var _antd = require("antd");
11
- var _styles = _interopRequireDefault(require("./styles"));
14
+ var _SendRounded = _interopRequireDefault(require("@material-ui/icons/SendRounded"));
15
+ var _styles = _interopRequireWildcard(require("./styles"));
12
16
  var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
13
- const _excluded = ["rows", "placeholder", "maxLength", "className"];
17
+ var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
18
+ var _constants = require("./constants");
19
+ const _excluded = ["rows", "placeholder", "maxLength", "className", "variant", "minRows", "maxRows", "sendIconConfig", "onSend", "value", "onChange"];
20
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
21
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
14
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
23
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
16
24
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -19,19 +27,25 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
19
27
  * A custom text area component.
20
28
  *
21
29
  * The component includes the following properties:
22
- * - `rows`: The number of rows for the text area.
30
+ * - `rows`: The number of rows for the text area (used for default variant).
23
31
  * - `placeholder`: The placeholder text for the text area.
24
32
  * - `maxLength`: The maximum length of the input value.
25
33
  * - `className`: Additional CSS class to apply to the text area.
34
+ * - `variant`: 'default' or 'gradient' - determines the styling variant.
35
+ * - `minRows`: Initial line height for gradient variant (default: 1).
36
+ * - `maxRows`: Maximum rows before scrolling starts for gradient variant (default: null for unlimited).
37
+ * - `sendIconConfig`: Object with `show` (boolean, default: false) and `disabled` (boolean, default: false) for gradient variant only.
38
+ * - `onSend`: Callback function called when send icon is clicked (gradient variant only).
26
39
  * - `antDesignProps`: Any other props to pass to the antd Input.TextArea component.
27
40
  *
28
41
  * The component will apply the following styles:
29
42
  * - A dark grey background when the component is disabled.
30
43
  * - A dark grey text color when the component is disabled.
31
44
  * - A custom style class of `custom-textarea` to the outer element.
45
+ * - Gradient border and auto-growing height for gradient variant.
32
46
  *
33
47
  * The component will also apply the following props to the antd Input.TextArea component:
34
- * - `rows`
48
+ * - `rows` (for default variant) or `minRows`/`maxRows` (for gradient variant)
35
49
  * - `placeholder`
36
50
  * - `maxLength`
37
51
  * - `className` (appended to the outer element)
@@ -42,9 +56,73 @@ function CustomTextArea(_ref) {
42
56
  rows,
43
57
  placeholder,
44
58
  maxLength,
45
- className
59
+ className,
60
+ variant = 'default',
61
+ minRows = _constants.DEFAULT_MIN_ROWS,
62
+ maxRows = _constants.DEFAULT_MAX_ROWS,
63
+ sendIconConfig = _constants.DEFAULT_SEND_ICON_CONFIG,
64
+ onSend,
65
+ value,
66
+ onChange
46
67
  } = _ref,
47
68
  antDesignProps = _objectWithoutProperties(_ref, _excluded);
69
+ // Render gradient variant
70
+ if (variant === 'gradient') {
71
+ // Use disabled prop directly from antDesignProps (standard Ant Design prop)
72
+ const isTextareaDisabled = antDesignProps === null || antDesignProps === void 0 ? void 0 : antDesignProps.disabled;
73
+
74
+ // Handle send icon click - gradient variant only
75
+ // Use value prop directly - no internal state management
76
+ const handleSendClick = () => {
77
+ const currentValue = value || '';
78
+ // Only allow click if textarea is enabled, icon config is not disabled, and has content
79
+ if (onSend && !isTextareaDisabled && !sendIconConfig.disabled && currentValue.trim()) {
80
+ onSend(currentValue);
81
+ }
82
+ };
83
+
84
+ // Determine if send icon should be enabled - gradient variant only
85
+ // Icon is enabled if: textarea is enabled AND config says it's not disabled AND there's content
86
+ // Use value prop directly - no internal state
87
+ const currentValue = value || '';
88
+ const isSendEnabled = !isTextareaDisabled && !sendIconConfig.disabled && currentValue.trim().length > 0;
89
+
90
+ // Determine if icon should be shown - only for gradient variant
91
+ // Hidden by default, only show when explicitly requested via sendIconConfig.show
92
+ const shouldShowIcon = sendIconConfig.show;
93
+ return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
94
+ theme: {
95
+ token: {
96
+ colorBgContainerDisabled: _ColorVariablesMap.default['--color-divider'],
97
+ colorTextDisabled: _ColorVariablesMap.default['--color-secondary-content']
98
+ }
99
+ }
100
+ }, /*#__PURE__*/_react.default.createElement(_styles.TextAreaWrapper, {
101
+ className: className,
102
+ $disabled: isTextareaDisabled
103
+ }, /*#__PURE__*/_react.default.createElement(_styles.default, _extends({
104
+ placeholder: placeholder,
105
+ maxLength: maxLength,
106
+ className: "custom-textarea-gradient",
107
+ value: value,
108
+ onChange: onChange,
109
+ autoSize: maxRows ? {
110
+ minRows,
111
+ maxRows
112
+ } : {
113
+ minRows
114
+ }
115
+ }, antDesignProps)), shouldShowIcon && /*#__PURE__*/_react.default.createElement(_styles.SendIconWrapper, {
116
+ className: isTextareaDisabled || sendIconConfig.disabled || !isSendEnabled ? 'icon-disabled' : 'icon-enabled'
117
+ }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
118
+ icon: _SendRounded.default,
119
+ size: 24,
120
+ color: isSendEnabled ? 'primary' : 'placeholder-text',
121
+ onClick: handleSendClick
122
+ }))));
123
+ }
124
+
125
+ // Render default variant (existing behavior - completely unchanged)
48
126
  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
49
127
  theme: {
50
128
  token: {
@@ -63,12 +141,29 @@ CustomTextArea.propTypes = {
63
141
  rows: _propTypes.default.number,
64
142
  placeholder: _propTypes.default.string,
65
143
  maxLength: _propTypes.default.number,
66
- className: _propTypes.default.string
144
+ className: _propTypes.default.string,
145
+ variant: _propTypes.default.oneOf(['default', 'gradient']),
146
+ minRows: _propTypes.default.number,
147
+ maxRows: _propTypes.default.number,
148
+ sendIconConfig: _propTypes.default.shape({
149
+ show: _propTypes.default.bool,
150
+ disabled: _propTypes.default.bool
151
+ }),
152
+ onSend: _propTypes.default.func,
153
+ value: _propTypes.default.string,
154
+ onChange: _propTypes.default.func
67
155
  };
68
156
  CustomTextArea.defaultProps = {
69
- rows: 2,
157
+ rows: _constants.DEFAULT_ROWS,
70
158
  placeholder: null,
71
159
  maxLength: 5000,
72
- className: ''
160
+ className: '',
161
+ variant: 'default',
162
+ minRows: _constants.DEFAULT_MIN_ROWS,
163
+ maxRows: _constants.DEFAULT_MAX_ROWS,
164
+ sendIconConfig: _constants.DEFAULT_SEND_ICON_CONFIG,
165
+ onSend: null,
166
+ value: undefined,
167
+ onChange: null
73
168
  };
74
169
  var _default = exports.default = CustomTextArea;
package/build/components/oa-component-textarea/constants.js ADDED
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.TEXTAREA_SHADOW = exports.TEXTAREA_BORDER_RADIUS = exports.SEND_ICON_SIZE = exports.GRADIENT_BORDER_COLORS = exports.DEFAULT_SEND_ICON_CONFIG = exports.DEFAULT_ROWS = exports.DEFAULT_MIN_ROWS = exports.DEFAULT_MAX_ROWS = void 0;
7
+ /**
8
+ * Constants for CustomTextArea component
9
+ */
10
+
11
+ // Default values for textarea configuration
12
+ const DEFAULT_MIN_ROWS = exports.DEFAULT_MIN_ROWS = 1;
13
+ const DEFAULT_MAX_ROWS = exports.DEFAULT_MAX_ROWS = null; // null means unlimited growth
14
+ const DEFAULT_ROWS = exports.DEFAULT_ROWS = 2;
15
+
16
+ // Gradient border colors
17
+ const GRADIENT_BORDER_COLORS = exports.GRADIENT_BORDER_COLORS = {
18
+ top: '#0098FF',
19
+ // Blue
20
+ middle: '#9A6CFF',
21
+ // Purple
22
+ bottom: '#FB6252' // Coral/Orange-Red
23
+ };
24
+
25
+ // Shadow styles
26
+ const TEXTAREA_SHADOW = exports.TEXTAREA_SHADOW = '0px 2px 10px rgba(0, 0, 0, 0.14)';
27
+
28
+ // Border radius
29
+ const TEXTAREA_BORDER_RADIUS = exports.TEXTAREA_BORDER_RADIUS = '12px';
30
+
31
+ // Icon sizes
32
+ const SEND_ICON_SIZE = exports.SEND_ICON_SIZE = 24;
33
+
34
+ // Default send icon configuration
35
+ const DEFAULT_SEND_ICON_CONFIG = exports.DEFAULT_SEND_ICON_CONFIG = {
36
+ show: false,
37
+ // Hidden by default - only show when explicitly requested
38
+ disabled: false
39
+ };
package/build/components/oa-component-textarea/styles.js CHANGED
@@ -3,14 +3,23 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = void 0;
6
+ exports.default = exports.TextAreaWrapper = exports.SendIconWrapper = void 0;
7
7
  var _styledComponents = _interopRequireDefault(require("styled-components"));
8
8
  var _antd = require("antd");
9
- var _templateObject;
9
+ var _constants = require("./constants");
10
+ var _templateObject, _templateObject2, _templateObject3;
10
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
12
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
12
13
  const {
13
14
  TextArea: AntdTextArea
14
15
  } = _antd.Input;
15
- const StyledTextArea = (0, _styledComponents.default)(AntdTextArea)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n &.custom-textarea {\n padding: 16px;\n resize: none;\n border-radius: 4px;\n max-height: 92px;\n border: 1px solid var(--color-placeholder-text);\n }\n &.custom-textarea:hover {\n border: 1px solid var(--color-primary);\n }\n &.custom-textarea:focus-within {\n box-shadow: 0px 0px 4px 0px rgba(1, 79, 197, 0.90);\n }\n"])));
16
+
17
+ // Default textarea styles (existing)
18
+ const StyledTextArea = (0, _styledComponents.default)(AntdTextArea)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n &.custom-textarea {\n padding: 16px;\n resize: none;\n border-radius: 4px;\n max-height: 92px;\n border: 1px solid var(--color-placeholder-text);\n }\n &.custom-textarea:hover {\n border: 1px solid var(--color-primary);\n }\n &.custom-textarea:focus-within {\n box-shadow: 0px 0px 4px 0px rgba(1, 79, 197, 0.90);\n }\n\n /* Gradient variant styles */\n &.custom-textarea-gradient {\n padding: 16px 48px 16px 16px;\n resize: none;\n border-radius: calc(", " - 2px);\n border: none;\n background: var(--color-primary-background);\n font-size: 16px;\n line-height: 24px;\n color: var(--color-primary-content);\n min-height: auto !important;\n box-shadow: none;\n width: 100%;\n }\n\n &.custom-textarea-gradient::placeholder {\n color: var(--color-secondary-content);\n }\n\n &.custom-textarea-gradient:hover {\n box-shadow: none;\n }\n\n &.custom-textarea-gradient:focus {\n outline: none;\n box-shadow: none;\n }\n\n &.custom-textarea-gradient:focus-within {\n box-shadow: none;\n }\n"])), _constants.TEXTAREA_BORDER_RADIUS);
19
+
20
+ // Wrapper for gradient variant with gradient border
21
+ const TextAreaWrapper = exports.TextAreaWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n display: block;\n width: 100%;\n border-radius: ", ";\n padding: 2px;\n background: ", ";\n box-shadow: ", ";\n opacity: ", ";\n"])), _constants.TEXTAREA_BORDER_RADIUS, props => props.$disabled ? 'var(--color-divider)' : "linear-gradient(\n 135deg,\n ".concat(_constants.GRADIENT_BORDER_COLORS.top, " 0%,\n ").concat(_constants.GRADIENT_BORDER_COLORS.middle, " 50%,\n ").concat(_constants.GRADIENT_BORDER_COLORS.bottom, " 100%\n )"), props => props.$disabled ? 'none' : _constants.TEXTAREA_SHADOW, props => props.$disabled ? 0.6 : 1);
22
+
23
+ // Send icon wrapper positioned absolutely
24
+ const SendIconWrapper = exports.SendIconWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: absolute;\n top: 18px;\n right: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n pointer-events: none;\n\n button,\n svg {\n pointer-events: auto;\n }\n\n /* Icon disabled state */\n &.icon-disabled {\n opacity: 0.5;\n \n button,\n svg {\n cursor: not-allowed;\n }\n }\n\n /* Icon enabled state */\n &.icon-enabled {\n opacity: 1;\n \n button,\n svg {\n cursor: pointer;\n }\n }\n"])));
16
25
  var _default = exports.default = StyledTextArea;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "1.0.1-stage.426",
3
+ "version": "1.0.1-stage.428",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",