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.
121 lines (118 loc) • 7.87 kB
JavaScript
;
require("core-js/modules/es.symbol.description.js");
require("core-js/modules/es.weak-map.js");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
require("core-js/modules/es.array.includes.js");
require("core-js/modules/es.string.includes.js");
var _react = _interopRequireWildcard(require("react"));
var _CheckBoxGroupModule = _interopRequireDefault(require("./CheckBoxGroup.module.css"));
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 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); }
const CheckboxGroup = _ref => {
let {
options,
label,
onChange,
style,
className,
required,
labelStyle,
value,
defaultValue,
name
} = _ref;
const checkBoxRefs = (0, _react.useRef)([]);
const [checkedItems, setCheckedItems] = (0, _react.useState)([]);
const [checkBox, setCheckBox] = (0, _react.useState)([options]);
// console.log(value)
(0, _react.useEffect)(() => {
if (value) {
// console.log(value, "checl");
setCheckedItems(value);
} else if (defaultValue) {
setCheckedItems(defaultValue);
} else {
setCheckedItems([]);
}
checkBoxRefs.current = Array(options === null || options === void 0 ? void 0 : options.length).fill().map((_, i) => (checkBoxRefs === null || checkBoxRefs === void 0 ? void 0 : checkBoxRefs.current[i]) || /*#__PURE__*/_react.default.createRef());
}, [options === null || options === void 0 ? void 0 : options.length, value, defaultValue]);
const selectField = index => {
var _checkBoxRefs$current;
checkBoxRefs === null || checkBoxRefs === void 0 || (_checkBoxRefs$current = checkBoxRefs.current[index].current) === null || _checkBoxRefs$current === void 0 ? void 0 : _checkBoxRefs$current.click();
};
const onCheckboxChange = (event, option) => {
var _event$target;
const isChecked = event === null || event === void 0 || (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.checked;
setCheckedItems(prevItems => {
let updatedItems;
if (isChecked) {
updatedItems = [...prevItems, option];
} else {
updatedItems = prevItems.filter(item => item !== option);
}
onChange(updatedItems);
return updatedItems;
});
};
const combinedStyle = _objectSpread({}, style);
const headerStyle = _objectSpread({}, labelStyle);
(0, _react.useEffect)(() => {
setCheckBox(options);
}, [options]);
// console.log(checkedItems,"check")
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
style: headerStyle,
className: _CheckBoxGroupModule.default.headers
}, label, required && /*#__PURE__*/_react.default.createElement("span", {
className: _CheckBoxGroupModule.default.required
}, "*")), /*#__PURE__*/_react.default.createElement("div", {
style: combinedStyle,
className: "".concat(className ? className : "", " ").concat(_CheckBoxGroupModule.default.checkBox)
}, checkBox === null || checkBox === void 0 ? void 0 : checkBox.map((option, index) => /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(_CheckBoxGroupModule.default.container),
key: option === null || option === void 0 ? void 0 : option.value
}, /*#__PURE__*/_react.default.createElement("input", {
ref: checkBoxRefs === null || checkBoxRefs === void 0 ? void 0 : checkBoxRefs.current[index],
type: "checkbox",
id: option === null || option === void 0 ? void 0 : option.id,
name: name,
value: option === null || option === void 0 ? void 0 : option.value,
checked: checkedItems === null || checkedItems === void 0 ? void 0 : checkedItems.includes(option === null || option === void 0 ? void 0 : option.value),
onChange: e => {
onCheckboxChange(e, option === null || option === void 0 ? void 0 : option.value);
}
}), /*#__PURE__*/_react.default.createElement("label", {
onClick: () => {
selectField(index);
},
htmlFor: option === null || option === void 0 ? void 0 : option.value,
className: "".concat(_CheckBoxGroupModule.default.checkmark),
style: {
cursor: "pointer",
marginTop: "2px"
}
}), /*#__PURE__*/_react.default.createElement("label", {
onClick: () => {
selectField(index);
},
htmlFor: option === null || option === void 0 ? void 0 : option.value,
style: {
fontFamily: combinedStyle !== null && combinedStyle !== void 0 && combinedStyle.fontFamily ? combinedStyle === null || combinedStyle === void 0 ? void 0 : combinedStyle.fontFamily : "Roboto, sans-serif",
cursor: "pointer",
marginLeft: "6px",
fontSize: combinedStyle !== null && combinedStyle !== void 0 && combinedStyle.fontSize ? combinedStyle === null || combinedStyle === void 0 ? void 0 : combinedStyle.fontSize : "14px"
}
}, option === null || option === void 0 ? void 0 : option.label), /*#__PURE__*/_react.default.createElement("br", null)))));
};
var _default = CheckboxGroup;
exports.default = _default;