@braineet/ui
Version:
Braineet design system
239 lines (238 loc) • 9.65 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"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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 _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); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
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 = 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
}));
};
exports.EditablePreview = EditablePreview;
var 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));
};
exports.EditableInput = EditableInput;
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 = Editable;
exports.default = _default;