@braineet/ui
Version:
Braineet design system
238 lines (237 loc) • 9.18 kB
JavaScript
;
exports.__esModule = true;
exports.default = exports.EditablePreview = exports.EditableInput = void 0;
var _react = _interopRequireWildcard(require("react"));
var _box = _interopRequireDefault(require("../box"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["value", "defaultValue", "isDisabled", "onChange", "startWithEditView", "onCancel", "onSubmit", "selectAllOnFocus", "submitOnBlur", "isPreviewFocusable", "placeholder", "children", "onEdit"],
_excluded2 = ["onBlur", "children"];
/* eslint-disable no-underscore-dangle */
/* eslint-disable no-unused-expressions */
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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); }
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 && {}.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; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
var EditableContext = /*#__PURE__*/(0, _react.createContext)();
var Editable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
var valueProp = _ref.value,
defaultValue = _ref.defaultValue,
isDisabled = _ref.isDisabled,
onChange = _ref.onChange,
startWithEditView = _ref.startWithEditView,
onCancel = _ref.onCancel,
onSubmit = _ref.onSubmit,
selectAllOnFocus = _ref.selectAllOnFocus,
submitOnBlur = _ref.submitOnBlur,
isPreviewFocusable = _ref.isPreviewFocusable,
_ref$placeholder = _ref.placeholder,
placeholder = _ref$placeholder === void 0 ? 'Click to edit...' : _ref$placeholder,
children = _ref.children,
onEdit = _ref.onEdit,
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
var _useState = (0, _react.useState)(startWithEditView && !isDisabled),
isEditing = _useState[0],
setIsEditing = _useState[1];
var _useRef = (0, _react.useRef)(!!valueProp),
isControlled = _useRef.current;
var _useState2 = (0, _react.useState)(defaultValue || ''),
value = _useState2[0],
setValue = _useState2[1];
var _value = isControlled ? valueProp : value;
var _useState3 = (0, _react.useState)(_value),
previousValue = _useState3[0],
setPreviousValue = _useState3[1];
var inputRef = (0, _react.useRef)(null);
var onRequestEdit = _react.default.useCallback(function () {
if (!isDisabled) {
setIsEditing(true);
}
}, [isDisabled]);
(0, _react.useEffect)(function () {
if (isEditing) {
onEdit && onEdit();
}
}, [isEditing, onEdit]);
(0, _react.useEffect)(function () {
if (isEditing && inputRef.current) {
inputRef.current.focus();
selectAllOnFocus && inputRef.current.select();
}
}, [isEditing, selectAllOnFocus]);
var handleCancel = _react.default.useCallback(function () {
setIsEditing(false);
setValue(previousValue);
if (value !== previousValue) {
onChange && onChange(previousValue);
}
onCancel && onCancel(previousValue);
}, [value, previousValue, onChange, onCancel]);
var handleSubmit = _react.default.useCallback(function () {
setIsEditing(false);
setPreviousValue(value);
onSubmit && onSubmit(value);
}, [value, onSubmit]);
var handleChange = _react.default.useCallback(function (event) {
if (!isControlled) {
setValue(event.target.value);
}
onChange && onChange(event.target.value);
}, [isControlled, onChange]);
var handleKeyDown = _react.default.useCallback(function (event) {
var key = event.key;
if (key === 'Escape') {
handleCancel();
return;
}
if (key === 'Enter') {
handleSubmit();
}
}, [handleCancel, handleSubmit]);
var handleFocus = _react.default.useCallback(function () {
if (selectAllOnFocus) {
inputRef.current.select();
}
}, [selectAllOnFocus]);
var childContext = _react.default.useMemo(function () {
return {
inputRef: inputRef,
isEditing: isEditing,
isDisabled: isDisabled,
placeholder: placeholder,
onRequestEdit: onRequestEdit,
submitOnBlur: submitOnBlur,
isPreviewFocusable: isPreviewFocusable,
value: _value,
onKeyDown: handleKeyDown,
onChange: handleChange,
onSubmit: handleSubmit,
onCancel: handleCancel,
onFocus: handleFocus
};
}, [inputRef, isEditing, isDisabled, placeholder, onRequestEdit, submitOnBlur, isPreviewFocusable, _value, handleKeyDown, handleChange, handleSubmit, handleCancel, handleFocus]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableContext.Provider, {
value: childContext,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_box.default, _extends({
ref: ref
}, rest, {
children: typeof children === 'function' ? children({
isEditing: isEditing,
onSubmit: handleSubmit,
onCancel: handleCancel,
onRequestEdit: onRequestEdit
}) : children
}))
});
});
Editable.displayName = 'Editable';
var sharedProps = {
fontFamily: 'inherit',
fontSize: 'inherit',
fontWeight: 'inherit',
textAlign: 'inherit',
fontStyle: 'normal',
fontStretch: 'normal',
lineHeight: 'normal',
background: 'transparent',
transition: 'all 0.2s',
borderRadius: '4px',
padding: '0',
margin: '0',
border: '2px solid transparent'
};
var EditablePreview = exports.EditablePreview = function EditablePreview(props) {
var _useContext = (0, _react.useContext)(EditableContext),
isEditing = _useContext.isEditing,
isDisabled = _useContext.isDisabled,
value = _useContext.value,
onRequestEdit = _useContext.onRequestEdit,
placeholder = _useContext.placeholder,
isPreviewFocusable = _useContext.isPreviewFocusable;
var hasValue = value != null && value !== '';
var getTabIndex = function getTabIndex() {
if ((!isEditing || !isDisabled) && isPreviewFocusable) {
return 0;
}
return null;
};
var styleProps = _extends({}, sharedProps, {
cursor: 'text',
display: 'inline-block',
opacity: !hasValue ? 0.6 : undefined
});
if (isEditing) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_box.default, _extends({
as: "span",
"aria-disabled": isDisabled,
tabIndex: getTabIndex(),
onFocus: onRequestEdit
}, styleProps, props, {
children: hasValue ? value : placeholder
}));
};
var EditableInput = exports.EditableInput = function EditableInput(_ref2) {
var _onBlur = _ref2.onBlur,
children = _ref2.children,
restProps = _objectWithoutPropertiesLoose(_ref2, _excluded2);
var _useContext2 = (0, _react.useContext)(EditableContext),
inputRef = _useContext2.inputRef,
isEditing = _useContext2.isEditing,
onChange = _useContext2.onChange,
onKeyDown = _useContext2.onKeyDown,
value = _useContext2.value,
onSubmit = _useContext2.onSubmit,
onCancel = _useContext2.onCancel,
submitOnBlur = _useContext2.submitOnBlur,
placeholder = _useContext2.placeholder,
isDisabled = _useContext2.isDisabled;
if (!isEditing) {
return null;
}
var styleProps = _extends({}, sharedProps, {
width: '100%',
padding: '0',
margin: '0'
});
var renderProps = {
ref: inputRef,
onBlur: function onBlur(event) {
submitOnBlur ? onSubmit() : onCancel();
if (_onBlur) {
_onBlur(event);
}
},
value: value,
placeholder: placeholder,
onChange: onChange,
onKeyDown: onKeyDown
};
return children ? children(renderProps) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_box.default, _extends({
as: "input",
outline: "none",
"aria-disabled": isDisabled,
disabled: isDisabled
}, renderProps, styleProps, restProps));
};
EditableInput.defaultProps = {
children: null,
onBlur: function onBlur() {}
};
Editable.defaultProps = {
defaultValue: '',
isPreviewFocusable: true,
submitOnBlur: true,
selectAllOnFocus: true,
isDisabled: false,
startWithEditView: false,
onCancel: function onCancel() {},
onChange: function onChange() {},
onEdit: function onEdit() {},
onSubmit: function onSubmit() {},
placeholder: '',
value: ''
};
Editable.displayName = 'Editable';
var _default = exports.default = Editable;