@omniumretail/component-library 1.0.19 → 1.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bundle.js +3 -3
- package/dist/types/components/Radio/Radio.stories.d.ts +2 -2
- package/dist/types/components/Radio/index.d.ts +8 -3
- package/package.json +1 -1
- package/src/components/Category/Category.stories.tsx +14 -0
- package/src/components/Category/CategoryContent/index.tsx +159 -0
- package/src/components/Category/CategoryContent/styles.module.scss +51 -0
- package/src/components/Category/CategorySidebar/index.tsx +246 -0
- package/src/components/Category/CategorySidebar/styles.module.scss +24 -0
- package/src/components/Category/index.tsx +58 -0
- package/src/components/Category/styles.module.scss +12 -0
- package/src/components/Radio/Radio.stories.tsx +23 -12
- package/src/components/Radio/index.tsx +18 -6
package/dist/bundle.js
CHANGED
|
@@ -9291,7 +9291,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
9291
9291
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
9292
9292
|
|
|
9293
9293
|
"use strict";
|
|
9294
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Radio\": function() { return /* binding */ Radio; }\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* harmony import */ var antd__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! antd */ \"./node_modules/antd/es/radio/index.js\");\n/* harmony import */ var _styles_module_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./styles.module.scss */ \"./src/components/Radio/styles.module.scss\");\nvar __assign = (undefined && undefined.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __rest = (undefined && undefined.__rest) || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\n\n\n\nvar Radio = function (_a) {\n var
|
|
9294
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Radio\": function() { return /* binding */ Radio; },\n/* harmony export */ \"RadioGroup\": function() { return /* binding */ RadioGroup; }\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n/* harmony import */ var antd__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! antd */ \"./node_modules/antd/es/radio/index.js\");\n/* harmony import */ var _styles_module_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./styles.module.scss */ \"./src/components/Radio/styles.module.scss\");\nvar __assign = (undefined && undefined.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __rest = (undefined && undefined.__rest) || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\n\n\n\nvar Radio = function (_a) {\n var radioProps = __rest(_a, []);\n return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(antd__WEBPACK_IMPORTED_MODULE_2__[\"default\"], __assign({ className: _styles_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].radio }, radioProps)));\n};\nvar RadioGroup = function (_a) {\n var options = _a.options, radioGroupProps = __rest(_a, [\"options\"]);\n return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(antd__WEBPACK_IMPORTED_MODULE_2__[\"default\"].Group, __assign({}, radioGroupProps, { children: options.map(function (option) { return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Radio, __assign({ value: option.value }, { children: option.label }), option.value)); }) })));\n};\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvY29tcG9uZW50cy9SYWRpby9pbmRleC50c3guanMiLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9saWIvLi9zcmMvY29tcG9uZW50cy9SYWRpby9pbmRleC50c3g/Yjg5MyJdLCJzb3VyY2VzQ29udGVudCI6WyJ2YXIgX19hc3NpZ24gPSAodGhpcyAmJiB0aGlzLl9fYXNzaWduKSB8fCBmdW5jdGlvbiAoKSB7XG4gICAgX19hc3NpZ24gPSBPYmplY3QuYXNzaWduIHx8IGZ1bmN0aW9uKHQpIHtcbiAgICAgICAgZm9yICh2YXIgcywgaSA9IDEsIG4gPSBhcmd1bWVudHMubGVuZ3RoOyBpIDwgbjsgaSsrKSB7XG4gICAgICAgICAgICBzID0gYXJndW1lbnRzW2ldO1xuICAgICAgICAgICAgZm9yICh2YXIgcCBpbiBzKSBpZiAoT2JqZWN0LnByb3RvdHlwZS5oYXNPd25Qcm9wZXJ0eS5jYWxsKHMsIHApKVxuICAgICAgICAgICAgICAgIHRbcF0gPSBzW3BdO1xuICAgICAgICB9XG4gICAgICAgIHJldHVybiB0O1xuICAgIH07XG4gICAgcmV0dXJuIF9fYXNzaWduLmFwcGx5KHRoaXMsIGFyZ3VtZW50cyk7XG59O1xudmFyIF9fcmVzdCA9ICh0aGlzICYmIHRoaXMuX19yZXN0KSB8fCBmdW5jdGlvbiAocywgZSkge1xuICAgIHZhciB0ID0ge307XG4gICAgZm9yICh2YXIgcCBpbiBzKSBpZiAoT2JqZWN0LnByb3RvdHlwZS5oYXNPd25Qcm9wZXJ0eS5jYWxsKHMsIHApICYmIGUuaW5kZXhPZihwKSA8IDApXG4gICAgICAgIHRbcF0gPSBzW3BdO1xuICAgIGlmIChzICE9IG51bGwgJiYgdHlwZW9mIE9iamVjdC5nZXRPd25Qcm9wZXJ0eVN5bWJvbHMgPT09IFwiZnVuY3Rpb25cIilcbiAgICAgICAgZm9yICh2YXIgaSA9IDAsIHAgPSBPYmplY3QuZ2V0T3duUHJvcGVydHlTeW1ib2xzKHMpOyBpIDwgcC5sZW5ndGg7IGkrKykge1xuICAgICAgICAgICAgaWYgKGUuaW5kZXhPZihwW2ldKSA8IDAgJiYgT2JqZWN0LnByb3RvdHlwZS5wcm9wZXJ0eUlzRW51bWVyYWJsZS5jYWxsKHMsIHBbaV0pKVxuICAgICAgICAgICAgICAgIHRbcFtpXV0gPSBzW3BbaV1dO1xuICAgICAgICB9XG4gICAgcmV0dXJuIHQ7XG59O1xuaW1wb3J0IHsganN4IGFzIF9qc3ggfSBmcm9tIFwicmVhY3QvanN4LXJ1bnRpbWVcIjtcbmltcG9ydCB7IFJhZGlvIGFzIFJhZGlvQW50ZCB9IGZyb20gJ2FudGQnO1xuaW1wb3J0IHN0eWxlcyBmcm9tICcuL3N0eWxlcy5tb2R1bGUuc2Nzcyc7XG5leHBvcnQgdmFyIFJhZGlvID0gZnVuY3Rpb24gKF9hKSB7XG4gICAgdmFyIHJhZGlvUHJvcHMgPSBfX3Jlc3QoX2EsIFtdKTtcbiAgICByZXR1cm4gKF9qc3goUmFkaW9BbnRkLCBfX2Fzc2lnbih7IGNsYXNzTmFtZTogc3R5bGVzLnJhZGlvIH0sIHJhZGlvUHJvcHMpKSk7XG59O1xuZXhwb3J0IHZhciBSYWRpb0dyb3VwID0gZnVuY3Rpb24gKF9hKSB7XG4gICAgdmFyIG9wdGlvbnMgPSBfYS5vcHRpb25zLCByYWRpb0dyb3VwUHJvcHMgPSBfX3Jlc3QoX2EsIFtcIm9wdGlvbnNcIl0pO1xuICAgIHJldHVybiAoX2pzeChSYWRpb0FudGQuR3JvdXAsIF9fYXNzaWduKHt9LCByYWRpb0dyb3VwUHJvcHMsIHsgY2hpbGRyZW46IG9wdGlvbnMubWFwKGZ1bmN0aW9uIChvcHRpb24pIHsgcmV0dXJuIChfanN4KFJhZGlvLCBfX2Fzc2lnbih7IHZhbHVlOiBvcHRpb24udmFsdWUgfSwgeyBjaGlsZHJlbjogb3B0aW9uLmxhYmVsIH0pLCBvcHRpb24udmFsdWUpKTsgfSkgfSkpKTtcbn07XG4iXSwibmFtZXMiOltdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./src/components/Radio/index.tsx\n");
|
|
9295
9295
|
|
|
9296
9296
|
/***/ }),
|
|
9297
9297
|
|
|
@@ -9368,7 +9368,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
9368
9368
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
9369
9369
|
|
|
9370
9370
|
"use strict";
|
|
9371
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Button\": function() { return /* reexport safe */ _Button__WEBPACK_IMPORTED_MODULE_0__.Button; },\n/* harmony export */ \"CustomDatePicker\": function() { return /* reexport safe */ _DatePicker__WEBPACK_IMPORTED_MODULE_10__.CustomDatePicker; },\n/* harmony export */ \"Footer\": function() { return /* reexport safe */ _Footer__WEBPACK_IMPORTED_MODULE_12__.Footer; },\n/* harmony export */ \"FormInputField\": function() { return /* reexport safe */ _Input__WEBPACK_IMPORTED_MODULE_2__.FormInputField; },\n/* harmony export */ \"InputCountryCode\": function() { return /* reexport safe */ _InputCountryCode__WEBPACK_IMPORTED_MODULE_3__.InputCountryCode; },\n/* harmony export */ \"InputField\": function() { return /* reexport safe */ _Input__WEBPACK_IMPORTED_MODULE_2__.InputField; },\n/* harmony export */ \"Label\": function() { return /* reexport safe */ _Label__WEBPACK_IMPORTED_MODULE_4__.Label; },\n/* harmony export */ \"Link\": function() { return /* reexport safe */ _Link__WEBPACK_IMPORTED_MODULE_5__.Link; },\n/* harmony export */ \"ModalConfirmation\": function() { return /* reexport safe */ _ModalConfirmation__WEBPACK_IMPORTED_MODULE_13__.ModalConfirmation; },\n/* harmony export */ \"ModalWithTable\": function() { return /* reexport safe */ _ModalWithTable__WEBPACK_IMPORTED_MODULE_14__.ModalWithTable; },\n/* harmony export */ \"Navigation\": function() { return /* reexport safe */ _Navigation__WEBPACK_IMPORTED_MODULE_1__.Navigation; },\n/* harmony export */ \"Radio\": function() { return /* reexport safe */ _Radio__WEBPACK_IMPORTED_MODULE_11__.Radio; },\n/* harmony export */ \"Select\": function() { return /* reexport safe */ _Select__WEBPACK_IMPORTED_MODULE_6__.Select; },\n/* harmony export */ \"Separator\": function() { return /* reexport safe */ _Separator__WEBPACK_IMPORTED_MODULE_7__.Separator; },\n/* harmony export */ \"Sidebar\": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_15__.Sidebar; },\n/* harmony export */ \"Spaces\": function() { return /* reexport safe */ _Separator__WEBPACK_IMPORTED_MODULE_7__.Spaces; },\n/* harmony export */ \"Switch\": function() { return /* reexport safe */ _Switch__WEBPACK_IMPORTED_MODULE_16__.Switch; },\n/* harmony export */ \"Table\": function() { return /* reexport safe */ _Table__WEBPACK_IMPORTED_MODULE_8__.Table; },\n/* harmony export */ \"TagField\": function() { return /* reexport safe */ _Tag__WEBPACK_IMPORTED_MODULE_9__.TagField; },\n/* harmony export */ \"sortBy\": function() { return /* reexport safe */ _Table__WEBPACK_IMPORTED_MODULE_8__.sortBy; }\n/* harmony export */ });\n/* harmony import */ var _Button__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Button */ \"./src/components/Button/index.tsx\");\n/* harmony import */ var _Navigation__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Navigation */ \"./src/components/Navigation/index.tsx\");\n/* harmony import */ var _Input__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Input */ \"./src/components/Input/index.tsx\");\n/* harmony import */ var _InputCountryCode__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./InputCountryCode */ \"./src/components/InputCountryCode/index.tsx\");\n/* harmony import */ var _Label__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Label */ \"./src/components/Label/index.tsx\");\n/* harmony import */ var _Link__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Link */ \"./src/components/Link/index.tsx\");\n/* harmony import */ var _Select__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Select */ \"./src/components/Select/index.tsx\");\n/* harmony import */ var _Separator__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Separator */ \"./src/components/Separator/index.tsx\");\n/* harmony import */ var _Table__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Table */ \"./src/components/Table/index.tsx\");\n/* harmony import */ var _Tag__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./Tag */ \"./src/components/Tag/index.tsx\");\n/* harmony import */ var _DatePicker__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./DatePicker */ \"./src/components/DatePicker/index.tsx\");\n/* harmony import */ var _Radio__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./Radio */ \"./src/components/Radio/index.tsx\");\n/* harmony import */ var _Footer__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./Footer */ \"./src/components/Footer/index.tsx\");\n/* harmony import */ var _ModalConfirmation__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./ModalConfirmation */ \"./src/components/ModalConfirmation/index.tsx\");\n/* harmony import */ var _ModalWithTable__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./ModalWithTable */ \"./src/components/ModalWithTable/index.tsx\");\n/* harmony import */ var _Sidebar__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./Sidebar */ \"./src/components/Sidebar/index.tsx\");\n/* harmony import */ var _Switch__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./Switch */ \"./src/components/Switch/index.tsx\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
9371
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Button\": function() { return /* reexport safe */ _Button__WEBPACK_IMPORTED_MODULE_0__.Button; },\n/* harmony export */ \"CustomDatePicker\": function() { return /* reexport safe */ _DatePicker__WEBPACK_IMPORTED_MODULE_10__.CustomDatePicker; },\n/* harmony export */ \"Footer\": function() { return /* reexport safe */ _Footer__WEBPACK_IMPORTED_MODULE_12__.Footer; },\n/* harmony export */ \"FormInputField\": function() { return /* reexport safe */ _Input__WEBPACK_IMPORTED_MODULE_2__.FormInputField; },\n/* harmony export */ \"InputCountryCode\": function() { return /* reexport safe */ _InputCountryCode__WEBPACK_IMPORTED_MODULE_3__.InputCountryCode; },\n/* harmony export */ \"InputField\": function() { return /* reexport safe */ _Input__WEBPACK_IMPORTED_MODULE_2__.InputField; },\n/* harmony export */ \"Label\": function() { return /* reexport safe */ _Label__WEBPACK_IMPORTED_MODULE_4__.Label; },\n/* harmony export */ \"Link\": function() { return /* reexport safe */ _Link__WEBPACK_IMPORTED_MODULE_5__.Link; },\n/* harmony export */ \"ModalConfirmation\": function() { return /* reexport safe */ _ModalConfirmation__WEBPACK_IMPORTED_MODULE_13__.ModalConfirmation; },\n/* harmony export */ \"ModalWithTable\": function() { return /* reexport safe */ _ModalWithTable__WEBPACK_IMPORTED_MODULE_14__.ModalWithTable; },\n/* harmony export */ \"Navigation\": function() { return /* reexport safe */ _Navigation__WEBPACK_IMPORTED_MODULE_1__.Navigation; },\n/* harmony export */ \"Radio\": function() { return /* reexport safe */ _Radio__WEBPACK_IMPORTED_MODULE_11__.Radio; },\n/* harmony export */ \"RadioGroup\": function() { return /* reexport safe */ _Radio__WEBPACK_IMPORTED_MODULE_11__.RadioGroup; },\n/* harmony export */ \"Select\": function() { return /* reexport safe */ _Select__WEBPACK_IMPORTED_MODULE_6__.Select; },\n/* harmony export */ \"Separator\": function() { return /* reexport safe */ _Separator__WEBPACK_IMPORTED_MODULE_7__.Separator; },\n/* harmony export */ \"Sidebar\": function() { return /* reexport safe */ _Sidebar__WEBPACK_IMPORTED_MODULE_15__.Sidebar; },\n/* harmony export */ \"Spaces\": function() { return /* reexport safe */ _Separator__WEBPACK_IMPORTED_MODULE_7__.Spaces; },\n/* harmony export */ \"Switch\": function() { return /* reexport safe */ _Switch__WEBPACK_IMPORTED_MODULE_16__.Switch; },\n/* harmony export */ \"Table\": function() { return /* reexport safe */ _Table__WEBPACK_IMPORTED_MODULE_8__.Table; },\n/* harmony export */ \"TagField\": function() { return /* reexport safe */ _Tag__WEBPACK_IMPORTED_MODULE_9__.TagField; },\n/* harmony export */ \"sortBy\": function() { return /* reexport safe */ _Table__WEBPACK_IMPORTED_MODULE_8__.sortBy; }\n/* harmony export */ });\n/* harmony import */ var _Button__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Button */ \"./src/components/Button/index.tsx\");\n/* harmony import */ var _Navigation__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Navigation */ \"./src/components/Navigation/index.tsx\");\n/* harmony import */ var _Input__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Input */ \"./src/components/Input/index.tsx\");\n/* harmony import */ var _InputCountryCode__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./InputCountryCode */ \"./src/components/InputCountryCode/index.tsx\");\n/* harmony import */ var _Label__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Label */ \"./src/components/Label/index.tsx\");\n/* harmony import */ var _Link__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Link */ \"./src/components/Link/index.tsx\");\n/* harmony import */ var _Select__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Select */ \"./src/components/Select/index.tsx\");\n/* harmony import */ var _Separator__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Separator */ \"./src/components/Separator/index.tsx\");\n/* harmony import */ var _Table__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Table */ \"./src/components/Table/index.tsx\");\n/* harmony import */ var _Tag__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./Tag */ \"./src/components/Tag/index.tsx\");\n/* harmony import */ var _DatePicker__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./DatePicker */ \"./src/components/DatePicker/index.tsx\");\n/* harmony import */ var _Radio__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./Radio */ \"./src/components/Radio/index.tsx\");\n/* harmony import */ var _Footer__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./Footer */ \"./src/components/Footer/index.tsx\");\n/* harmony import */ var _ModalConfirmation__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./ModalConfirmation */ \"./src/components/ModalConfirmation/index.tsx\");\n/* harmony import */ var _ModalWithTable__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./ModalWithTable */ \"./src/components/ModalWithTable/index.tsx\");\n/* harmony import */ var _Sidebar__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./Sidebar */ \"./src/components/Sidebar/index.tsx\");\n/* harmony import */ var _Switch__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./Switch */ \"./src/components/Switch/index.tsx\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvY29tcG9uZW50cy9pbmRleC50c3guanMiLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vbGliLy4vc3JjL2NvbXBvbmVudHMvaW5kZXgudHN4PzE4ZGEiXSwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9CdXR0b24nO1xuZXhwb3J0ICogZnJvbSAnLi9OYXZpZ2F0aW9uJztcbmV4cG9ydCAqIGZyb20gJy4vSW5wdXQnO1xuZXhwb3J0ICogZnJvbSAnLi9JbnB1dENvdW50cnlDb2RlJztcbmV4cG9ydCAqIGZyb20gJy4vTGFiZWwnO1xuZXhwb3J0ICogZnJvbSAnLi9MaW5rJztcbmV4cG9ydCAqIGZyb20gJy4vU2VsZWN0JztcbmV4cG9ydCAqIGZyb20gJy4vU2VwYXJhdG9yJztcbmV4cG9ydCAqIGZyb20gJy4vVGFibGUnO1xuZXhwb3J0ICogZnJvbSAnLi9UYWcnO1xuZXhwb3J0ICogZnJvbSAnLi9EYXRlUGlja2VyJztcbmV4cG9ydCAqIGZyb20gJy4vUmFkaW8nO1xuZXhwb3J0ICogZnJvbSAnLi9Gb290ZXInO1xuZXhwb3J0ICogZnJvbSAnLi9Nb2RhbENvbmZpcm1hdGlvbic7XG5leHBvcnQgKiBmcm9tICcuL01vZGFsV2l0aFRhYmxlJztcbmV4cG9ydCAqIGZyb20gJy4vU2lkZWJhcic7XG5leHBvcnQgKiBmcm9tICcuL1N3aXRjaCc7XG4iXSwibmFtZXMiOltdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./src/components/index.tsx\n");
|
|
9372
9372
|
|
|
9373
9373
|
/***/ }),
|
|
9374
9374
|
|
|
@@ -9390,7 +9390,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
9390
9390
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
9391
9391
|
|
|
9392
9392
|
"use strict";
|
|
9393
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Button\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Button; },\n/* harmony export */ \"CustomDatePicker\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.CustomDatePicker; },\n/* harmony export */ \"Footer\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Footer; },\n/* harmony export */ \"FormInputField\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.FormInputField; },\n/* harmony export */ \"InputCountryCode\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.InputCountryCode; },\n/* harmony export */ \"InputField\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.InputField; },\n/* harmony export */ \"Label\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Label; },\n/* harmony export */ \"Link\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Link; },\n/* harmony export */ \"ModalConfirmation\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.ModalConfirmation; },\n/* harmony export */ \"ModalWithTable\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.ModalWithTable; },\n/* harmony export */ \"Navigation\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Navigation; },\n/* harmony export */ \"Radio\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Radio; },\n/* harmony export */ \"Select\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Select; },\n/* harmony export */ \"Separator\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Separator; },\n/* harmony export */ \"Sidebar\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Sidebar; },\n/* harmony export */ \"Spaces\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Spaces; },\n/* harmony export */ \"Switch\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Switch; },\n/* harmony export */ \"Table\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Table; },\n/* harmony export */ \"TagField\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.TagField; },\n/* harmony export */ \"mergei18n\": function() { return /* reexport safe */ _constants_i18n__WEBPACK_IMPORTED_MODULE_1__.mergei18n; },\n/* harmony export */ \"sortBy\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.sortBy; }\n/* harmony export */ });\n/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components */ \"./src/components/index.tsx\");\n/* harmony import */ var _constants_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./constants/i18n */ \"./src/constants/i18n.ts\");\n\n\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
9393
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Button\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Button; },\n/* harmony export */ \"CustomDatePicker\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.CustomDatePicker; },\n/* harmony export */ \"Footer\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Footer; },\n/* harmony export */ \"FormInputField\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.FormInputField; },\n/* harmony export */ \"InputCountryCode\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.InputCountryCode; },\n/* harmony export */ \"InputField\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.InputField; },\n/* harmony export */ \"Label\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Label; },\n/* harmony export */ \"Link\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Link; },\n/* harmony export */ \"ModalConfirmation\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.ModalConfirmation; },\n/* harmony export */ \"ModalWithTable\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.ModalWithTable; },\n/* harmony export */ \"Navigation\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Navigation; },\n/* harmony export */ \"Radio\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Radio; },\n/* harmony export */ \"RadioGroup\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.RadioGroup; },\n/* harmony export */ \"Select\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Select; },\n/* harmony export */ \"Separator\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Separator; },\n/* harmony export */ \"Sidebar\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Sidebar; },\n/* harmony export */ \"Spaces\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Spaces; },\n/* harmony export */ \"Switch\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Switch; },\n/* harmony export */ \"Table\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.Table; },\n/* harmony export */ \"TagField\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.TagField; },\n/* harmony export */ \"mergei18n\": function() { return /* reexport safe */ _constants_i18n__WEBPACK_IMPORTED_MODULE_1__.mergei18n; },\n/* harmony export */ \"sortBy\": function() { return /* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_0__.sortBy; }\n/* harmony export */ });\n/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components */ \"./src/components/index.tsx\");\n/* harmony import */ var _constants_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./constants/i18n */ \"./src/constants/i18n.ts\");\n\n\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvaW5kZXgudHMuanMiLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUE7QUFDQSIsInNvdXJjZXMiOlsid2VicGFjazovL2xpYi8uL3NyYy9pbmRleC50cz9lOTRlIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vY29tcG9uZW50cyc7XG5leHBvcnQgKiBmcm9tICcuL2NvbnN0YW50cy9pMThuJztcbiJdLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./src/index.ts\n");
|
|
9394
9394
|
|
|
9395
9395
|
/***/ }),
|
|
9396
9396
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Meta, Story } from "@storybook/react";
|
|
2
|
-
import {
|
|
2
|
+
import { RadioProps } from "antd";
|
|
3
3
|
declare const _default: Meta<import("@storybook/react").Args>;
|
|
4
4
|
export default _default;
|
|
5
|
-
export declare const Primary: Story<
|
|
5
|
+
export declare const Primary: Story<RadioProps>;
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import type { RadioProps } from 'antd';
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
import type { RadioGroupProps } from 'antd/lib/radio';
|
|
3
|
+
export declare const Radio: ({ ...radioProps }: RadioProps) => JSX.Element;
|
|
4
|
+
export interface CustomRadioGroupProps extends RadioGroupProps {
|
|
5
|
+
options: {
|
|
6
|
+
label: string;
|
|
7
|
+
value: string;
|
|
8
|
+
}[];
|
|
4
9
|
}
|
|
5
|
-
export declare const
|
|
10
|
+
export declare const RadioGroup: ({ options, ...radioGroupProps }: CustomRadioGroupProps) => JSX.Element;
|
package/package.json
CHANGED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Meta, Story } from "@storybook/react";
|
|
2
|
+
import { Category } from '.';
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title: 'Category',
|
|
6
|
+
component: Category,
|
|
7
|
+
} as Meta;
|
|
8
|
+
|
|
9
|
+
const Template: Story<any> = (args) => <Category {...args}></Category>;
|
|
10
|
+
|
|
11
|
+
export const Primary = Template.bind({});
|
|
12
|
+
Primary.args = {
|
|
13
|
+
};
|
|
14
|
+
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
import { Form, Select } from 'antd';
|
|
2
|
+
import { useForm } from 'antd/es/form/Form';
|
|
3
|
+
import { Button } from 'components/Button';
|
|
4
|
+
import { InputField } from 'components/Input';
|
|
5
|
+
import { Label } from 'components/Label';
|
|
6
|
+
import { Questions } from 'components/Questions';
|
|
7
|
+
import { Switch } from 'components/Switch';
|
|
8
|
+
import { useEffect, useState } from 'react';
|
|
9
|
+
import styles from './styles.module.scss';
|
|
10
|
+
|
|
11
|
+
interface categoryContent {
|
|
12
|
+
categoryContentShow: boolean;
|
|
13
|
+
categoryContentInfo: any;
|
|
14
|
+
categorySidebarData: any;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
const defaultInitialValues = {
|
|
18
|
+
generalEvaluationLevel: "0",
|
|
19
|
+
questions: []
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export const CategoryContent = (props: categoryContent) => {
|
|
23
|
+
const {
|
|
24
|
+
categoryContentShow,
|
|
25
|
+
categorySidebarData
|
|
26
|
+
} = props;
|
|
27
|
+
|
|
28
|
+
const [contentInfo, setContentInfo] = useState<any>();
|
|
29
|
+
const [switchStatus, setSwitchStatus] = useState<boolean>(false);
|
|
30
|
+
const [initialValues, setInitialValues] = useState<any>(categorySidebarData?.data || defaultInitialValues)
|
|
31
|
+
const [form] = useForm();
|
|
32
|
+
|
|
33
|
+
const onFinish = (values: any) => {
|
|
34
|
+
setContentInfo(values);
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
const switchHandler = (enabled: boolean) => {
|
|
38
|
+
setSwitchStatus(enabled);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
useEffect(() => {
|
|
42
|
+
props.categoryContentInfo(contentInfo);
|
|
43
|
+
}, [contentInfo]);
|
|
44
|
+
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
setInitialValues(categorySidebarData?.data?.data);
|
|
47
|
+
}, [categorySidebarData]);
|
|
48
|
+
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
form.setFieldsValue(initialValues);
|
|
51
|
+
}, [form, initialValues]);
|
|
52
|
+
|
|
53
|
+
return (
|
|
54
|
+
<div className={styles.categoryContent}>
|
|
55
|
+
<div className={styles.title}>Editar Categoria</div>
|
|
56
|
+
|
|
57
|
+
{
|
|
58
|
+
!categoryContentShow
|
|
59
|
+
? <div className={styles.uncheckedCategory}>
|
|
60
|
+
Please Select a Category on the sidebar
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
: <>
|
|
64
|
+
<Form
|
|
65
|
+
initialValues={initialValues}
|
|
66
|
+
name="dynamic_form_nest_item"
|
|
67
|
+
onFinish={onFinish}
|
|
68
|
+
autoComplete="off"
|
|
69
|
+
form={form}
|
|
70
|
+
>
|
|
71
|
+
<div className={styles.formHeader}>
|
|
72
|
+
<div className={styles.category}>
|
|
73
|
+
<Label isUppercase>
|
|
74
|
+
Nome Categoria
|
|
75
|
+
</Label>
|
|
76
|
+
<Form.Item
|
|
77
|
+
name={['categoryName']}
|
|
78
|
+
rules={[{ required: true, message: 'Category Name is Missing' }]}
|
|
79
|
+
>
|
|
80
|
+
<InputField placeholder={'Category Name'} />
|
|
81
|
+
</Form.Item>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
{!categorySidebarData?.data?.children?.length &&
|
|
85
|
+
<>
|
|
86
|
+
<div className={styles.openAnswer}>
|
|
87
|
+
<Label isUppercase>
|
|
88
|
+
Resposta aberta
|
|
89
|
+
</Label>
|
|
90
|
+
<Form.Item
|
|
91
|
+
name={['openAnswer']}
|
|
92
|
+
>
|
|
93
|
+
<Switch onChange={(enabled: boolean) => switchHandler(enabled)} />
|
|
94
|
+
</Form.Item>
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
{
|
|
98
|
+
!switchStatus &&
|
|
99
|
+
<>
|
|
100
|
+
<div className={styles.generalEvaluationLevel}>
|
|
101
|
+
<Label isUppercase>
|
|
102
|
+
Nivel de avaliação Geral
|
|
103
|
+
</Label>
|
|
104
|
+
<Form.Item
|
|
105
|
+
name={['generalEvaluationLevel']}
|
|
106
|
+
>
|
|
107
|
+
<Select options={[
|
|
108
|
+
{
|
|
109
|
+
value: '0',
|
|
110
|
+
label: '1 a 5',
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
value: '1',
|
|
114
|
+
label: '1 a 4',
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
value: '2',
|
|
118
|
+
label: '1 a 5 ou “Não Aplicável”',
|
|
119
|
+
},
|
|
120
|
+
]}
|
|
121
|
+
/>
|
|
122
|
+
</Form.Item>
|
|
123
|
+
</div>
|
|
124
|
+
|
|
125
|
+
<div className={styles.grade}>
|
|
126
|
+
<Label isUppercase>
|
|
127
|
+
Ponderação
|
|
128
|
+
</Label>
|
|
129
|
+
<Form.Item
|
|
130
|
+
name={['grade']}
|
|
131
|
+
rules={[{ required: true, message: 'Grade is Missing' }]}
|
|
132
|
+
>
|
|
133
|
+
<InputField placeholder={'EX: 15%'} />
|
|
134
|
+
</Form.Item>
|
|
135
|
+
</div>
|
|
136
|
+
</>
|
|
137
|
+
}
|
|
138
|
+
</>
|
|
139
|
+
}
|
|
140
|
+
</div>
|
|
141
|
+
|
|
142
|
+
{!categorySidebarData?.data?.children?.length &&
|
|
143
|
+
<div className={styles.questionsWrapper}>
|
|
144
|
+
<Label isUppercase>
|
|
145
|
+
Questões
|
|
146
|
+
</Label>
|
|
147
|
+
<Form.Item>
|
|
148
|
+
<Questions></Questions>
|
|
149
|
+
</Form.Item>
|
|
150
|
+
</div>
|
|
151
|
+
}
|
|
152
|
+
</Form>
|
|
153
|
+
|
|
154
|
+
<Button onClick={() => form.submit()}>Submit</Button>
|
|
155
|
+
</>
|
|
156
|
+
}
|
|
157
|
+
</div>
|
|
158
|
+
);
|
|
159
|
+
};
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
.title {
|
|
2
|
+
font-size: var(--font-size-body-4);
|
|
3
|
+
font-weight: 600;
|
|
4
|
+
line-height: 100%;
|
|
5
|
+
color: var(--color-blue);
|
|
6
|
+
text-transform: uppercase;
|
|
7
|
+
margin-bottom: 32px;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.uncheckedCategory {
|
|
11
|
+
font-size: var(--font-size-body-2);
|
|
12
|
+
color: var(--color-black);
|
|
13
|
+
font-weight: 700;
|
|
14
|
+
text-transform: uppercase;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.formHeader {
|
|
18
|
+
display: grid;
|
|
19
|
+
grid-template-columns: minmax(200px, 1fr) auto 1fr auto;
|
|
20
|
+
gap: 46px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.questionsWrapper {
|
|
24
|
+
margin-top: 16px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
Label {
|
|
28
|
+
margin-bottom: 8px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.categoryContent {
|
|
32
|
+
:global {
|
|
33
|
+
.ant-select {
|
|
34
|
+
width: 100%;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.ant-select-selector {
|
|
38
|
+
border-color: rgba(var(--color-black-rgb), .5) !important;
|
|
39
|
+
height: 50px !important;
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
}
|
|
43
|
+
.ant-select-arrow {
|
|
44
|
+
color: var(--color-black);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.ant-switch {
|
|
48
|
+
width: 30px;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
import React, { useEffect, useState } from 'react';
|
|
2
|
+
import { Tree } from 'antd';
|
|
3
|
+
import type { TreeProps } from 'antd/es/tree';
|
|
4
|
+
import styles from './styles.module.scss';
|
|
5
|
+
import { PlusOutlined } from '@ant-design/icons';
|
|
6
|
+
import { Button } from 'components/Button';
|
|
7
|
+
|
|
8
|
+
export interface Questions {
|
|
9
|
+
grade: string;
|
|
10
|
+
questions: string;
|
|
11
|
+
info: string;
|
|
12
|
+
}
|
|
13
|
+
export interface Data {
|
|
14
|
+
categoryName: string;
|
|
15
|
+
generalEvaluationLevel: string;
|
|
16
|
+
grade: string;
|
|
17
|
+
openAnswer: boolean;
|
|
18
|
+
questions: Questions[];
|
|
19
|
+
}
|
|
20
|
+
export interface DataNode {
|
|
21
|
+
title: string;
|
|
22
|
+
key: string;
|
|
23
|
+
data?: Data;
|
|
24
|
+
children?: DataNode[];
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
interface SidebarProps {
|
|
28
|
+
categoryContentData: any;
|
|
29
|
+
categorySidebarInfo: any;
|
|
30
|
+
data: DataNode[];
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
function get_element_by_index(data: DataNode[], index: string | number): DataNode | null {
|
|
34
|
+
for (const item of data) {
|
|
35
|
+
if (item.key === index) {
|
|
36
|
+
return item;
|
|
37
|
+
} else if (item.children) {
|
|
38
|
+
const result = get_element_by_index(item.children, index);
|
|
39
|
+
if (result !== null) {
|
|
40
|
+
return result;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
return null;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
function addPropertyByIndex(data: DataNode[], index: string | number, property: string, value: any): DataNode[] {
|
|
48
|
+
return data.map((item: DataNode) => {
|
|
49
|
+
if (item.key === index) {
|
|
50
|
+
return { ...item, [property]: value };
|
|
51
|
+
}
|
|
52
|
+
else if (item.children) {
|
|
53
|
+
return { ...item, children: addPropertyByIndex(item.children, index, property, value) };
|
|
54
|
+
}
|
|
55
|
+
return item;
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
export const CategorySidebar = (props: SidebarProps) => {
|
|
60
|
+
const {
|
|
61
|
+
categoryContentData,
|
|
62
|
+
data
|
|
63
|
+
} = props;
|
|
64
|
+
|
|
65
|
+
const [gData, setGData] = useState(data);
|
|
66
|
+
const [expandedKeys] = useState([]);
|
|
67
|
+
const [sidebarInfo, setSidebarInfo] = useState<any>();
|
|
68
|
+
|
|
69
|
+
const onDragEnter: TreeProps['onDragEnter'] = (info) => {
|
|
70
|
+
// expandedKeys
|
|
71
|
+
// setExpandedKeys(info.expandedKeys)
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
const onDrop: TreeProps['onDrop'] = (info) => {
|
|
75
|
+
const dropKey = info.node.key;
|
|
76
|
+
const dragKey = info.dragNode.key;
|
|
77
|
+
const dropPos = info.node.pos.split('-');
|
|
78
|
+
const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
|
|
79
|
+
const { data: nodeData } = info.node as DataNode;
|
|
80
|
+
const questions: Questions[] | undefined = nodeData?.questions;
|
|
81
|
+
|
|
82
|
+
if(questions && questions.length > 0) {
|
|
83
|
+
console.log('you cant add a subcategory to a category with questions');
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
if (dropPos.length >= 4) {
|
|
88
|
+
console.log('cant have more than 3 levels');
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
const loop = (
|
|
93
|
+
data: DataNode[],
|
|
94
|
+
key: React.Key,
|
|
95
|
+
callback: (node: DataNode, i: number, data: DataNode[]) => void,
|
|
96
|
+
) => {
|
|
97
|
+
for (let i = 0; i < data.length; i++) {
|
|
98
|
+
if (data[i].key === key) {
|
|
99
|
+
return callback(data[i], i, data);
|
|
100
|
+
}
|
|
101
|
+
if (data[i].children) {
|
|
102
|
+
loop(data[i].children!, key, callback);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
const data = [...gData];
|
|
107
|
+
|
|
108
|
+
// Find dragObject
|
|
109
|
+
let dragObj: DataNode;
|
|
110
|
+
loop(data, dragKey, (item, index, arr) => {
|
|
111
|
+
arr.splice(index, 1);
|
|
112
|
+
dragObj = item;
|
|
113
|
+
});
|
|
114
|
+
|
|
115
|
+
if (!info.dropToGap) {
|
|
116
|
+
// Drop on the content
|
|
117
|
+
loop(data, dropKey, (item) => {
|
|
118
|
+
item.children = item.children || [];
|
|
119
|
+
// where to insert
|
|
120
|
+
item.children.unshift(dragObj);
|
|
121
|
+
// {...dragObj, key: `${item.key}-${item.children.length}`}
|
|
122
|
+
});
|
|
123
|
+
} else if (
|
|
124
|
+
((info.node as any).props.children || []).length > 0 && // Has children
|
|
125
|
+
(info.node as any).props.expanded && // Is expanded
|
|
126
|
+
dropPosition === 1 // On the bottom gap
|
|
127
|
+
) {
|
|
128
|
+
loop(data, dropKey, (item) => {
|
|
129
|
+
item.children = item.children || [];
|
|
130
|
+
// where to insert
|
|
131
|
+
item.children.unshift(dragObj);
|
|
132
|
+
// in previous version, we use item.children.push(dragObj) to insert the
|
|
133
|
+
// item to the tail of the children
|
|
134
|
+
});
|
|
135
|
+
} else {
|
|
136
|
+
let ar: DataNode[] = [];
|
|
137
|
+
let i: number;
|
|
138
|
+
loop(data, dropKey, (_item, index, arr) => {
|
|
139
|
+
ar = arr;
|
|
140
|
+
i = index;
|
|
141
|
+
});
|
|
142
|
+
if (dropPosition === -1) {
|
|
143
|
+
ar.splice(i!, 0, dragObj!);
|
|
144
|
+
} else {
|
|
145
|
+
ar.splice(i! + 1, 0, dragObj!);
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
let newData: any = {};
|
|
150
|
+
|
|
151
|
+
// TODO: create a recursive function that does the same
|
|
152
|
+
// This code changes the indexes on the fly while dragging and dropping
|
|
153
|
+
|
|
154
|
+
let keyCounter = 0;
|
|
155
|
+
data.forEach((category: any) => {
|
|
156
|
+
const categoryKey = `${keyCounter++}`;
|
|
157
|
+
let children: any = [];
|
|
158
|
+
if (category.children) {
|
|
159
|
+
category.children.forEach((subcategory: any, subcategoryindex: number) => {
|
|
160
|
+
const subcategoryKey = `${categoryKey}.${subcategoryindex}`;
|
|
161
|
+
let subChildren: any = [];
|
|
162
|
+
if (subcategory.children) {
|
|
163
|
+
subcategory.children.forEach((lastSubcategory: any, lastSubCategoryIndex: number) => {
|
|
164
|
+
const lastSubcategoryKey = `${subcategoryKey}.${lastSubCategoryIndex}`;
|
|
165
|
+
subChildren.push({ ...lastSubcategory, key: lastSubcategoryKey });
|
|
166
|
+
});
|
|
167
|
+
}
|
|
168
|
+
children.push({ ...subcategory, children: subChildren, key: subcategoryKey });
|
|
169
|
+
});
|
|
170
|
+
}
|
|
171
|
+
newData[categoryKey] = { ...category, children };
|
|
172
|
+
});
|
|
173
|
+
|
|
174
|
+
// TODO: update this code if possible once the TODO before is done
|
|
175
|
+
/*
|
|
176
|
+
This code removes the property that was assigned to the object ex: 0: {}, 1: {} changes to {}, {}
|
|
177
|
+
*/
|
|
178
|
+
const checkedData = Object.values(newData).map((category: any, index: number) => {
|
|
179
|
+
return { ...category, key: index };
|
|
180
|
+
});
|
|
181
|
+
|
|
182
|
+
setGData(checkedData);
|
|
183
|
+
};
|
|
184
|
+
|
|
185
|
+
const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
|
|
186
|
+
setSidebarInfo(selectedKeys);
|
|
187
|
+
};
|
|
188
|
+
|
|
189
|
+
const addCategory = () => {
|
|
190
|
+
setGData((prevCategories: DataNode[]) => [
|
|
191
|
+
...prevCategories,
|
|
192
|
+
{ title: `New category`, key: `${gData.length}` },
|
|
193
|
+
])
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
useEffect(() => {
|
|
197
|
+
props.categorySidebarInfo({
|
|
198
|
+
selectKey: sidebarInfo,
|
|
199
|
+
data: get_element_by_index(gData, sidebarInfo && sidebarInfo[0]),
|
|
200
|
+
});
|
|
201
|
+
}, [sidebarInfo]);
|
|
202
|
+
|
|
203
|
+
useEffect(() => {
|
|
204
|
+
const newGData = addPropertyByIndex(gData, sidebarInfo && sidebarInfo[0], "data", categoryContentData);
|
|
205
|
+
|
|
206
|
+
const updatedGData = newGData.map((category: any, index) => {
|
|
207
|
+
if(category?.data) {
|
|
208
|
+
return {...category, title: `${category.data.categoryName} ${category.data.questions ? '(Q: ' + category.data.questions.length + ')' : ''} ${category.data.grade ? '(G: ' +category.data.grade + ')' : ''}`}
|
|
209
|
+
}
|
|
210
|
+
return category;
|
|
211
|
+
})
|
|
212
|
+
|
|
213
|
+
setGData(updatedGData);
|
|
214
|
+
}, [categoryContentData]);
|
|
215
|
+
|
|
216
|
+
useEffect(() => {
|
|
217
|
+
props.categorySidebarInfo({
|
|
218
|
+
selectKey: sidebarInfo,
|
|
219
|
+
data: get_element_by_index(gData, sidebarInfo && sidebarInfo[0])
|
|
220
|
+
});
|
|
221
|
+
|
|
222
|
+
console.log(gData);
|
|
223
|
+
}, [gData]);
|
|
224
|
+
|
|
225
|
+
return (
|
|
226
|
+
<div className={styles.categorySidebar}>
|
|
227
|
+
<div className={styles.title}>Categorias</div>
|
|
228
|
+
<Button icon={<PlusOutlined />} onClick={addCategory}>
|
|
229
|
+
Adicionar Categoria
|
|
230
|
+
</Button>
|
|
231
|
+
|
|
232
|
+
<div className={styles.categoryViewer}>
|
|
233
|
+
<Tree
|
|
234
|
+
className="draggable-tree"
|
|
235
|
+
defaultExpandedKeys={expandedKeys}
|
|
236
|
+
draggable
|
|
237
|
+
blockNode
|
|
238
|
+
onDragEnter={onDragEnter}
|
|
239
|
+
onDrop={onDrop}
|
|
240
|
+
treeData={gData}
|
|
241
|
+
onSelect={onSelect}
|
|
242
|
+
/>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
);
|
|
246
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
.categorySidebar {
|
|
2
|
+
:global {
|
|
3
|
+
.ant-tree-title {
|
|
4
|
+
font-weight: var(--font-weight-semibold);
|
|
5
|
+
}
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.title {
|
|
10
|
+
font-size: var(--font-size-body-4);
|
|
11
|
+
font-weight: 600;
|
|
12
|
+
line-height: 100%;
|
|
13
|
+
color: var(--color-blue);
|
|
14
|
+
text-transform: uppercase;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
button {
|
|
18
|
+
margin-top: 32px;
|
|
19
|
+
width: 100%;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.categoryViewer {
|
|
23
|
+
margin-top: 20px;
|
|
24
|
+
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import styles from './styles.module.scss';
|
|
2
|
+
import { CategorySidebar, DataNode } from './CategorySidebar';
|
|
3
|
+
import { useEffect, useState } from 'react';
|
|
4
|
+
import { CategoryContent } from './CategoryContent';
|
|
5
|
+
|
|
6
|
+
interface Category {
|
|
7
|
+
data: DataNode;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
const fakeData: any = {
|
|
11
|
+
data: [
|
|
12
|
+
{
|
|
13
|
+
"title": "21 (G: 2)",
|
|
14
|
+
"key": "0",
|
|
15
|
+
"data": {
|
|
16
|
+
"categoryName": "21",
|
|
17
|
+
"grade": "2"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"title": "asda (G: 5)",
|
|
22
|
+
"key": "1",
|
|
23
|
+
"data": {
|
|
24
|
+
"categoryName": "asda",
|
|
25
|
+
"grade": "5"
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
],
|
|
29
|
+
noData: []
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export const Category = (props: Category) => {
|
|
33
|
+
const {
|
|
34
|
+
data = fakeData.noData
|
|
35
|
+
} = props;
|
|
36
|
+
|
|
37
|
+
const [categoryContentInfo, setCategoryContentInfo] = useState<any>();
|
|
38
|
+
const [categorySidebarInfo, setCategorySidebarInfo] = useState<any>();
|
|
39
|
+
const [showContent, setShowContent] = useState<boolean>(false);
|
|
40
|
+
|
|
41
|
+
useEffect(() => {
|
|
42
|
+
}, [categoryContentInfo]);
|
|
43
|
+
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
setShowContent(categorySidebarInfo?.selectKey?.length > 0);
|
|
46
|
+
}, [categorySidebarInfo]);
|
|
47
|
+
|
|
48
|
+
return (
|
|
49
|
+
<div className={styles.category}>
|
|
50
|
+
<div className={styles.sidebarWrapper}>
|
|
51
|
+
<CategorySidebar categorySidebarInfo={setCategorySidebarInfo} categoryContentData={categoryContentInfo} data={data} />
|
|
52
|
+
</div>
|
|
53
|
+
<div className={styles.contentWrapper}>
|
|
54
|
+
<CategoryContent categoryContentInfo={setCategoryContentInfo} categoryContentShow={showContent} categorySidebarData={categorySidebarInfo} />
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
)
|
|
58
|
+
};
|
|
@@ -1,32 +1,43 @@
|
|
|
1
1
|
import { Meta, Story } from "@storybook/react";
|
|
2
|
-
import { Radio as RadioAntd, RadioChangeEvent } from "antd";
|
|
2
|
+
import { Radio as RadioAntd, RadioChangeEvent, RadioProps } from "antd";
|
|
3
3
|
import { useState } from "react";
|
|
4
|
-
import { Radio,
|
|
4
|
+
import { Radio, RadioGroup } from '.';
|
|
5
5
|
|
|
6
6
|
export default {
|
|
7
7
|
title: 'Radio',
|
|
8
8
|
component: Radio,
|
|
9
9
|
} as Meta;
|
|
10
10
|
|
|
11
|
-
const Template: Story<
|
|
11
|
+
const Template: Story<RadioProps> = (args) => {
|
|
12
12
|
const [value, setValue] = useState();
|
|
13
13
|
|
|
14
14
|
const onChange = (e: RadioChangeEvent) => {
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
console.log('radio checked', e.target.value);
|
|
16
|
+
setValue(e.target.value);
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
return (
|
|
20
|
-
<
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
20
|
+
<div>
|
|
21
|
+
<RadioAntd.Group onChange={onChange} value={value} defaultValue={3}>
|
|
22
|
+
<Radio {...args} value={1}></Radio>
|
|
23
|
+
<Radio {...args} value={2}></Radio>
|
|
24
|
+
<Radio {...args} value={3}></Radio>
|
|
25
|
+
<Radio {...args} value={4}></Radio>
|
|
26
|
+
</RadioAntd.Group>
|
|
27
|
+
|
|
28
|
+
<RadioGroup
|
|
29
|
+
options={[
|
|
30
|
+
{ label: 'Option 1', value: '1' },
|
|
31
|
+
{ label: 'Option 2', value: '2' },
|
|
32
|
+
{ label: 'Option 3', value: '3' },
|
|
33
|
+
]}
|
|
34
|
+
onChange={onChange}
|
|
35
|
+
/>
|
|
36
|
+
</div>
|
|
37
|
+
|
|
26
38
|
)
|
|
27
39
|
};
|
|
28
40
|
|
|
29
41
|
export const Primary = Template.bind({});
|
|
30
42
|
Primary.args = {
|
|
31
|
-
description: 'Permanente',
|
|
32
43
|
};
|
|
@@ -1,14 +1,26 @@
|
|
|
1
1
|
import { Radio as RadioAntd } from 'antd';
|
|
2
2
|
import type { RadioProps } from 'antd';
|
|
3
|
+
import type { RadioGroupProps } from 'antd/lib/radio';
|
|
3
4
|
import styles from './styles.module.scss';
|
|
4
5
|
|
|
5
|
-
export
|
|
6
|
-
|
|
7
|
-
}
|
|
6
|
+
export const Radio = ({...radioProps }: RadioProps) => {
|
|
7
|
+
return (
|
|
8
|
+
<RadioAntd className={styles.radio} {...radioProps} />
|
|
9
|
+
)
|
|
10
|
+
};
|
|
8
11
|
|
|
9
|
-
export
|
|
12
|
+
export interface CustomRadioGroupProps extends RadioGroupProps {
|
|
13
|
+
options: { label: string; value: string }[];
|
|
14
|
+
}
|
|
10
15
|
|
|
16
|
+
export const RadioGroup = ({ options, ...radioGroupProps }: CustomRadioGroupProps) => {
|
|
11
17
|
return (
|
|
12
|
-
<RadioAntd
|
|
13
|
-
|
|
18
|
+
<RadioAntd.Group {...radioGroupProps}>
|
|
19
|
+
{options.map((option) => (
|
|
20
|
+
<Radio key={option.value} value={option.value}>
|
|
21
|
+
{option.label}
|
|
22
|
+
</Radio>
|
|
23
|
+
))}
|
|
24
|
+
</RadioAntd.Group>
|
|
25
|
+
);
|
|
14
26
|
};
|