@storybook/design-system
Version:
Storybook design system
181 lines (160 loc) • 9.43 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Textarea = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _theming = require("@storybook/theming");
var _styles = require("./shared/styles");
var _excluded = ["id", "value", "label", "hideLabel", "error", "subtext", "subtextSentiment", "appearance", "orientation", "className", "startFocused"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
var _ref2 = process.env.NODE_ENV === "production" ? {
name: "1ed4kgp",
styles: "border:0px!important;clip:rect(0 0 0 0)!important;-webkit-clip-path:inset(100%)!important;clip-path:inset(100%)!important;height:1px!important;overflow:hidden!important;padding:0px!important;position:absolute!important;white-space:nowrap!important;width:1px!important"
} : {
name: "rur865-Label",
styles: "border:0px!important;clip:rect(0 0 0 0)!important;-webkit-clip-path:inset(100%)!important;clip-path:inset(100%)!important;height:1px!important;overflow:hidden!important;padding:0px!important;position:absolute!important;white-space:nowrap!important;width:1px!important;label:Label;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var Label = (0, _theming.styled)("label", process.env.NODE_ENV === "production" ? {
target: "ewpevpx6"
} : {
target: "ewpevpx6",
label: "Label"
})(function (props) {
return props.hideLabel && _ref2;
}, ";");
var ErrorMessage = (0, _theming.styled)("span", process.env.NODE_ENV === "production" ? {
target: "ewpevpx5"
} : {
target: "ewpevpx5",
label: "ErrorMessage"
})("color:", _styles.color.negative, ";font-weight:", _styles.typography.weight.regular, ";");
var _ref = process.env.NODE_ENV === "production" ? {
name: "1gqevwh",
styles: "height:0;margin:0"
} : {
name: "13sv6tg-LabelWrapper",
styles: "height:0;margin:0;label:LabelWrapper;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var LabelWrapper = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "ewpevpx4"
} : {
target: "ewpevpx4",
label: "LabelWrapper"
})("margin-bottom:0.33em;font-weight:", _styles.typography.weight.bold, ";font-size:", _styles.typography.size.s2, "px;", function (props) {
return props.hideLabel && !props.error && _ref;
}, " ", function (props) {
return !props.hideLabel && /*#__PURE__*/(0, _theming.css)(ErrorMessage, "{margin-left:0.5em;}" + (process.env.NODE_ENV === "production" ? "" : ";label:LabelWrapper;"));
}, ";");
var Subtext = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "ewpevpx3"
} : {
target: "ewpevpx3",
label: "Subtext"
})();
var TextareaText = (0, _theming.styled)("textarea", process.env.NODE_ENV === "production" ? {
target: "ewpevpx2"
} : {
target: "ewpevpx2",
label: "TextareaText"
})("::placeholder{color:", _styles.color.mediumdark, ";}appearance:none;border:none;box-sizing:border-box;display:block;outline:none;width:100%;word-wrap:break-word;&[disabled]{cursor:not-allowed;opacity:0.5;}&:-webkit-autofill{-webkit-box-shadow:0 0 0 3em ", _styles.color.lightest, " inset;}");
var TextareaWrapper = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "ewpevpx1"
} : {
target: "ewpevpx1",
label: "TextareaWrapper"
})("display:inline-block;font-size:", _styles.typography.size.s2, "px;overflow:hidden;position:relative;vertical-align:top;width:100%;", TextareaText, "{background:", _styles.color.lightest, ";border-radius:0;color:", _styles.color.darkest, ";font-size:", _styles.typography.size.s2, "px;line-height:20px;padding:0.7111em 1em;box-shadow:", _styles.color.border, " 0 0 0 1px inset;&:focus{box-shadow:", _styles.color.secondary, " 0 0 0 1px inset;}}", function (props) {
return props.error && /*#__PURE__*/(0, _theming.css)(TextareaText, "{box-shadow:", _styles.color.red, " 0 0 0 1px inset;&:focus{box-shadow:", _styles.color.red, " 0 0 0 1px inset!important;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:TextareaWrapper;"));
}, ";");
var TextareaContainer = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "ewpevpx0"
} : {
target: "ewpevpx0",
label: "TextareaContainer"
})(function (props) {
return props.orientation === 'horizontal' && /*#__PURE__*/(0, _theming.css)("display:table-row;", LabelWrapper, ",", TextareaWrapper, "{display:table-cell;}", LabelWrapper, "{width:1px;padding-right:20px;}", TextareaWrapper, "{width:auto;}" + (process.env.NODE_ENV === "production" ? "" : ";label:TextareaContainer;"));
}, ";");
var getErrorMessage = function getErrorMessage(_ref3) {
var error = _ref3.error,
value = _ref3.value;
return typeof error === 'function' ? error(value) : error;
};
var Textarea = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
var id = _ref4.id,
value = _ref4.value,
label = _ref4.label,
_ref4$hideLabel = _ref4.hideLabel,
hideLabel = _ref4$hideLabel === void 0 ? false : _ref4$hideLabel,
_ref4$error = _ref4.error,
error = _ref4$error === void 0 ? null : _ref4$error,
subtext = _ref4.subtext,
subtextSentiment = _ref4.subtextSentiment,
_ref4$appearance = _ref4.appearance,
appearance = _ref4$appearance === void 0 ? 'default' : _ref4$appearance,
_ref4$orientation = _ref4.orientation,
orientation = _ref4$orientation === void 0 ? 'vertical' : _ref4$orientation,
className = _ref4.className,
_ref4$startFocused = _ref4.startFocused,
startFocused = _ref4$startFocused === void 0 ? false : _ref4$startFocused,
rest = (0, _objectWithoutProperties2["default"])(_ref4, _excluded);
// Outside refs take precedence
var selfRef = (0, _react.useRef)();
var textareaRef = ref || selfRef;
var didFocusOnStart = (0, _react.useRef)(false);
(0, _react.useEffect)(function () {
if (textareaRef && textareaRef.current && startFocused && !didFocusOnStart.current) {
textareaRef.current.focus();
didFocusOnStart.current = true;
}
}, [textareaRef, textareaRef.current, didFocusOnStart, didFocusOnStart.current]);
var _useState = (0, _react.useState)(getErrorMessage({
error: error,
value: value
})),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
errorMessage = _useState2[0],
setErrorMessage = _useState2[1];
(0, _react.useEffect)(function () {
setErrorMessage(getErrorMessage({
error: error,
value: value
}));
}, [value, error]);
var errorId = "".concat(id, "-error");
var subtextId = "".concat(id, "-subtext");
var ariaDescribedBy = "".concat(error ? errorId : '', " ").concat(subtext ? subtextId : '');
return /*#__PURE__*/_react["default"].createElement(TextareaContainer, {
orientation: orientation,
className: className
}, /*#__PURE__*/_react["default"].createElement(LabelWrapper, {
hideLabel: hideLabel,
error: errorMessage
}, /*#__PURE__*/_react["default"].createElement(Label, {
htmlFor: id,
hideLabel: hideLabel
}, label), errorMessage && /*#__PURE__*/_react["default"].createElement(ErrorMessage, {
id: errorId,
"aria-hidden": true
}, errorMessage)), /*#__PURE__*/_react["default"].createElement(TextareaWrapper, {
error: errorMessage
}, /*#__PURE__*/_react["default"].createElement(TextareaText, (0, _extends2["default"])({
id: id,
value: value,
rows: 7,
"aria-invalid": !!error,
"aria-describedby": ariaDescribedBy,
ref: textareaRef
}, rest)), subtext && /*#__PURE__*/_react["default"].createElement(Subtext, {
id: subtextId
}, subtext)));
});
exports.Textarea = Textarea;