glide-design-system
Version:
Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.
151 lines (148 loc) • 8.85 kB
JavaScript
;
require("core-js/modules/es.symbol.description.js");
require("core-js/modules/es.object.assign.js");
require("core-js/modules/es.weak-map.js");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TextField = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
require("./textfield.css");
var _propTypes = _interopRequireDefault(require("prop-types"));
const _excluded = ["type", "style", "onChange", "value", "placeholder", "disabled", "size", "icon", "iconPosition", "name", "width", "required", "className", "textFieldStyle", "containerClass", "id", "label"];
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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
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; }
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; }
// /**
// * renders Textfield
// * @param {*} type default: "text": The type of the input field. It can be any valid HTML input type, such as "text", "password", "email", etc.
// * @param {*} style An object containing custom styles to be applied to the container of the text field.
// * @param {*} onChange A function to be called when the value of the input field changes. It receives the event object as an argument.
// * @param {*} value The current value of the input field. It is used to control the input field from a parent component.
// * @param {*} placeholder The placeholder text to display inside the input field when it is empty.
// * @param {*} disabled A boolean flag to disable the input field if set to true.
// * @param {*} size The size of the text field. It can be "small", "medium", or "large".
// * @param {*} icon An icon element to be displayed before or after the input field
// * @param {*} iconPosition The position of the icon relative to the input field. It can be set to "start" (before the input) or "end" (after the input).
// * @param {*} name The name attribute of the input field. It is used to identify the input field when submitting a form.
// * @param {*} width The width of the text field container.
// */
/**
* Text Fields let users enter and edit text.
*/
const TextField = _ref => {
let {
type = "text",
style,
onChange,
value,
placeholder,
disabled,
size,
icon,
iconPosition,
name,
width = "342px",
required,
className,
textFieldStyle,
containerClass,
id,
label
} = _ref,
props = _objectWithoutProperties(_ref, _excluded);
const [updateValue, setValue] = (0, _react.useState)(value ? value : "");
(0, _react.useEffect)(() => {
setValue(value);
}, [value]);
const combinedStyle = _objectSpread({
width: width,
height: size === "large" ? "40px" : size === "small" ? "32px" : "36px",
flexDirection: iconPosition === "end" ? "row-reverse" : "",
backgroundColor: disabled ? "#f9f9f9" : "#ffffff"
}, style);
const valueHandler = e => {
setValue(e.target.value);
if (onChange) onChange(e);
};
return /*#__PURE__*/_react.default.createElement("div", {
style: {
width: width
}
}, (label || required) && /*#__PURE__*/_react.default.createElement("p", {
style: {
margin: "0px !important"
},
className: "headers"
}, label ? label : "", required && /*#__PURE__*/_react.default.createElement("span", {
className: "required"
}, "*")), /*#__PURE__*/_react.default.createElement("div", {
className: "textfieldParentContainer ".concat(containerClass ? containerClass : ""),
style: combinedStyle
}, icon && /*#__PURE__*/_react.default.createElement("div", {
className: "textfieldIcon"
}, icon), /*#__PURE__*/_react.default.createElement("input", _extends({
"data-testid": id,
id: id,
type: type,
onChange: e => valueHandler(e),
value: updateValue === undefined ? "" : updateValue,
placeholder: placeholder,
disabled: disabled,
name: name,
className: "textfield ".concat(className ? className : "")
}, props, {
style: _objectSpread({
fontSize: size === "large" ? "18px" : size === "small" ? "14px" : "16px",
cursor: disabled ? "not-allowed" : ""
}, textFieldStyle)
}))));
};
exports.TextField = TextField;
TextField.propTypes = {
/**
* Variant of the textField.
*/
// variant: PropTypes.string,
/**
* TextField disabled or not.
*/
disabled: _propTypes.default.bool,
/**
* Icon to be display in textField.
*/
icon: _propTypes.default.object,
/**
* Position of Icon.
*/
iconPosition: _propTypes.default.oneOf(["start", "end"]),
/**
* How large should the textField be?
*/
size: _propTypes.default.oneOf(["small", "medium", "large"]),
/**
* Optional change handler.
*/
onChange: _propTypes.default.func,
/**
* Name of TextField.
*/
name: _propTypes.default.string,
/**
* Width of the textField
*/
width: _propTypes.default.string,
required: _propTypes.default.bool
};
TextField.defaultProps = {
size: "medium"
};