@elice/material-quiz 1.220803.0

package/cjs/components/shared/question-checkbox/QuestionCheckboxContext.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const QuestionCheckboxContext = React__default["default"].createContext(undefined);
+QuestionCheckboxContext.displayName = 'QuestionCheckboxContext';
+
+function QuestionCheckboxContextProvider({
+  selectedOptions,
+  onSelect,
+  disabled,
+  children
+}) {
+  const onSelectValue = React__default["default"].useCallback(onSelect, []);
+  const value = React__default["default"].useMemo(() => ({
+    selectedOptions,
+    disabled,
+    onSelect: onSelectValue
+  }), [selectedOptions, disabled, onSelectValue]);
+  return React__default["default"].createElement(QuestionCheckboxContext.Provider, {
+    value: value
+  }, children);
+}
+
+function useQuestionCheckboxContext() {
+  const context = React__default["default"].useContext(QuestionCheckboxContext);
+
+  if (context === undefined) {
+    throw new Error('useQuestionCheckboxContext must be used within a QuestionCheckboxContextProvider');
+  }
+
+  return context;
+}
+
+exports.QuestionCheckboxContextProvider = QuestionCheckboxContextProvider;
+exports.useQuestionCheckboxContext = useQuestionCheckboxContext;

package/cjs/components/shared/question-checkbox/QuestionCheckboxOption.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare type Status = 'correct' | 'wrong' | 'answer';
+interface QuestionCheckboxOptionProps {
+    value: any;
+    status?: Status;
+    isAnswer?: boolean;
+}
+declare const QuestionCheckboxOption: React.FC<QuestionCheckboxOptionProps>;
+export default QuestionCheckboxOption;

package/cjs/components/shared/question-checkbox/QuestionCheckboxOption.js

@@ -0,0 +1,188 @@
+'use strict';
+
+var React = require('react');
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+var QuestionCheckboxContext = require('./QuestionCheckboxContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledQuestionCheckboxOption = styled__default["default"].div.withConfig({
+  componentId: "sc-1erloup-0"
+})(["display:flex;align-items:center;padding:1.125rem;border-radius:8px;background-color:", ";&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], ({
+  checked,
+  status
+}) => {
+  switch (status) {
+    case 'correct':
+      return designTokens.base.color.green1;
+
+    case 'wrong':
+      return designTokens.base.color.red1;
+
+    default:
+      return checked ? designTokens.base.color.primary1 : designTokens.base.color.navy5;
+  }
+}, ({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer', ({
+  isAnswer
+}) => isAnswer ? `border: 3px solid ${designTokens.base.color.green5}` : '');
+const StyledCustomCheckboxButton = styled__default["default"].span.withConfig({
+  componentId: "sc-1erloup-1"
+})([""]);
+const StyledQuestionCheckboxInput = styled__default["default"].input.withConfig({
+  componentId: "sc-1erloup-2"
+})(["flex:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:1.25rem;height:1.25rem;margin-right:0.875rem;background-color:", ";border:", ";", ""], ({
+  checked,
+  status
+}) => {
+  switch (status) {
+    case 'correct':
+      return designTokens.base.color.green9;
+
+    case 'wrong':
+      return designTokens.base.color.red9;
+
+    default:
+      return checked ? designTokens.base.color.primary6 : 'transparent';
+  }
+}, ({
+  checked,
+  status
+}) => {
+  switch (status) {
+    case 'correct':
+      return designTokens.base.color.green9;
+
+    case 'wrong':
+      return designTokens.base.color.red9;
+
+    default:
+      return checked ? designTokens.base.color.primary6 : `1px solid ${designTokens.base.color.gray3}`;
+  }
+}, ({
+  status,
+  checked
+}) => {
+  let bgColor;
+
+  switch (status) {
+    case 'correct':
+      bgColor = designTokens.base.color.green9;
+      break;
+
+    case 'wrong':
+      bgColor = designTokens.base.color.red9;
+      break;
+
+    default:
+      bgColor = 'transparent';
+      break;
+  }
+
+  let borderColor;
+
+  switch (status) {
+    case 'correct':
+      borderColor = designTokens.base.color.green1;
+      break;
+
+    case 'wrong':
+      borderColor = designTokens.base.color.red1;
+      break;
+
+    default:
+      borderColor = checked ? designTokens.base.color.primary1 : status ? designTokens.base.color.navy5 : 'transparent';
+      break;
+  }
+
+  return `
+          &:after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 5px;
+            height: 10px;
+            border: solid ${borderColor};
+            transform: translate(-50%, -50%) rotate(45deg);
+            border-width: 0 3px 3px 0;
+            background-color: ${bgColor};
+          }
+        `;
+});
+const StyledLabel = styled__default["default"].label.withConfig({
+  componentId: "sc-1erloup-3"
+})(["word-break:break-all;margin-right:0.875rem;font-size:", ";color:", ";& p{color:", ";}"], designTokens.base.size.body3, ({
+  checked,
+  status
+}) => {
+  switch (status) {
+    case 'correct':
+      return designTokens.base.color.green9;
+
+    case 'wrong':
+      return designTokens.base.color.red9;
+
+    default:
+      return checked ? designTokens.base.color.primary6 : designTokens.base.color.navy0;
+  }
+}, ({
+  checked,
+  status
+}) => {
+  switch (status) {
+    case 'correct':
+      return designTokens.base.color.green9;
+
+    case 'wrong':
+      return designTokens.base.color.red9;
+
+    default:
+      return checked ? designTokens.base.color.primary6 : designTokens.base.color.navy0;
+  }
+});
+const QuestionCheckboxOption = React__default["default"].memo(({
+  value,
+  status,
+  isAnswer,
+  children
+}) => {
+  const {
+    selectedOptions,
+    disabled,
+    onSelect
+  } = QuestionCheckboxContext.useQuestionCheckboxContext();
+  const checked = selectedOptions.includes(value);
+  return React__default["default"].createElement(StyledQuestionCheckboxOption, {
+    isAnswer: isAnswer,
+    disabled: disabled,
+    checked: checked,
+    onClick: e => {
+      e.preventDefault();
+
+      if (disabled) {
+        return;
+      }
+
+      onSelect(value);
+    },
+    status: status
+  }, React__default["default"].createElement(StyledCustomCheckboxButton, null), React__default["default"].createElement(StyledQuestionCheckboxInput, {
+    id: value,
+    readOnly: true,
+    type: "checkbox",
+    checked: checked,
+    status: status
+  }), React__default["default"].createElement(StyledLabel, {
+    htmlFor: value,
+    checked: checked,
+    status: status
+  }, children));
+});
+
+module.exports = QuestionCheckboxOption;

package/cjs/components/shared/question-radio/QuestionRadio.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface QuestionRadioProps {
+    selectedValue: any;
+    onSelect: (index: number) => void;
+    disabled: boolean;
+}
+declare const QuestionRadio: React.FC<QuestionRadioProps>;
+export default QuestionRadio;

package/cjs/components/shared/question-radio/QuestionRadio.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var styled = require('styled-components');
+var QuestionRadioContext = require('./QuestionRadioContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledQuestionRadio = styled__default["default"].div.withConfig({
+  componentId: "sc-s7wqiy-0"
+})(["display:flex;flex-direction:column;"]);
+
+const QuestionRadio = _a => {
+  var {
+    children
+  } = _a,
+      props = tslib.__rest(_a, ["children"]);
+
+  return React__default["default"].createElement(QuestionRadioContext.QuestionRadioContextProvider, Object.assign({}, props), React__default["default"].createElement(StyledQuestionRadio, null, children));
+};
+
+module.exports = QuestionRadio;

package/cjs/components/shared/question-radio/QuestionRadioContext.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { QuestionRadioProps } from './QuestionRadio';
+declare type Value = Pick<QuestionRadioProps, 'selectedValue' | 'disabled' | 'onSelect'>;
+interface QuestionRadioProviderProps extends QuestionRadioProps {
+    children: React.ReactNode;
+}
+declare function QuestionRadioContextProvider({ selectedValue, onSelect, disabled, children, }: QuestionRadioProviderProps): JSX.Element;
+declare function useQuestionRadioContext(): Value;
+export { QuestionRadioContextProvider, useQuestionRadioContext };

package/cjs/components/shared/question-radio/QuestionRadioContext.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const QuestionRadioContext = React__default["default"].createContext(undefined);
+QuestionRadioContext.displayName = 'QuestionRadioContext';
+
+function QuestionRadioContextProvider({
+  selectedValue,
+  onSelect,
+  disabled,
+  children
+}) {
+  const onSelectValue = React__default["default"].useCallback(onSelect, []);
+  const value = React__default["default"].useMemo(() => ({
+    selectedValue,
+    disabled,
+    onSelect: onSelectValue
+  }), [selectedValue, disabled, onSelectValue]);
+  return React__default["default"].createElement(QuestionRadioContext.Provider, {
+    value: value
+  }, children);
+}
+
+function useQuestionRadioContext() {
+  const context = React__default["default"].useContext(QuestionRadioContext);
+
+  if (context === undefined) {
+    throw new Error('useQuestionRadioContext must be used within a QuestionRadioContextProvider');
+  }
+
+  return context;
+}
+
+exports.QuestionRadioContextProvider = QuestionRadioContextProvider;
+exports.useQuestionRadioContext = useQuestionRadioContext;

package/cjs/components/shared/question-radio/QuestionRadioOption.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare type Status = 'correct' | 'wrong' | 'answer';
+interface QuestionRadioOptionProps {
+    value: any;
+    status?: Status;
+    isAnswer?: boolean;
+}
+declare const QuestionRadioOption: React.FC<QuestionRadioOptionProps>;
+export default QuestionRadioOption;

package/cjs/components/shared/question-radio/QuestionRadioOption.js

@@ -0,0 +1,156 @@
+'use strict';
+
+var React = require('react');
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+var QuestionRadioContext = require('./QuestionRadioContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledQuestionRadioOption = styled__default["default"].div.withConfig({
+  componentId: "sc-cy66me-0"
+})(["display:flex;align-items:center;padding:1.125rem;border-radius:8px;background-color:", ";&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], ({
+  checked,
+  status
+}) => {
+  switch (status) {
+    case 'correct':
+      return designTokens.base.color.green1;
+
+    case 'wrong':
+      return designTokens.base.color.red1;
+
+    case 'answer':
+      return designTokens.base.color.black;
+
+    default:
+      return checked ? designTokens.base.color.primary1 : designTokens.base.color.navy5;
+  }
+}, ({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer', ({
+  isAnswer
+}) => isAnswer ? `border: 3px solid ${designTokens.base.color.green5}` : '');
+const StyledQuestionRadioInput = styled__default["default"].input.withConfig({
+  componentId: "sc-cy66me-1"
+})(["flex:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;border-radius:50%;width:1.25rem;height:1.25rem;margin-right:0.875rem;border:2px solid ", ";", ""], ({
+  checked,
+  status
+}) => {
+  switch (status) {
+    case 'correct':
+      return designTokens.base.color.green9;
+
+    case 'wrong':
+      return designTokens.base.color.red9;
+
+    default:
+      return checked ? designTokens.base.color.primary6 : designTokens.base.color.gray3;
+  }
+}, ({
+  status,
+  checked
+}) => {
+  let bgColor;
+
+  switch (status) {
+    case 'correct':
+      bgColor = designTokens.base.color.green9;
+      break;
+
+    case 'wrong':
+      bgColor = designTokens.base.color.red9;
+      break;
+
+    default:
+      bgColor = checked ? designTokens.base.color.primary6 : status ? designTokens.base.color.gray3 : 'transparent';
+      break;
+  }
+
+  return `
+          &:after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 70%;
+            height: 70%;
+            border-radius: 50%;
+            background-color: ${bgColor};
+          }
+        `;
+});
+const StyledLabel = styled__default["default"].label.withConfig({
+  componentId: "sc-cy66me-2"
+})(["word-break:break-all;margin-right:0.875rem;font-size:", ";color:", ";& p{color:", ";}"], designTokens.base.size.body3, ({
+  checked,
+  status
+}) => {
+  switch (status) {
+    case 'correct':
+      return designTokens.base.color.green9;
+
+    case 'wrong':
+      return designTokens.base.color.red9;
+
+    default:
+      return checked ? designTokens.base.color.primary6 : designTokens.base.color.navy0;
+  }
+}, ({
+  checked,
+  status
+}) => {
+  switch (status) {
+    case 'correct':
+      return designTokens.base.color.green9;
+
+    case 'wrong':
+      return designTokens.base.color.red9;
+
+    default:
+      return checked ? designTokens.base.color.primary6 : designTokens.base.color.navy0;
+  }
+});
+const QuestionRadioOption = React__default["default"].memo(({
+  value,
+  status,
+  isAnswer,
+  children
+}) => {
+  const {
+    selectedValue,
+    disabled,
+    onSelect
+  } = QuestionRadioContext.useQuestionRadioContext();
+  return React__default["default"].createElement(StyledQuestionRadioOption, {
+    isAnswer: isAnswer,
+    disabled: disabled,
+    checked: selectedValue === value,
+    onClick: e => {
+      e.preventDefault();
+
+      if (disabled) {
+        return;
+      }
+
+      onSelect(value);
+    },
+    status: status
+  }, React__default["default"].createElement(StyledQuestionRadioInput, {
+    id: value,
+    type: "radio",
+    readOnly: true,
+    checked: selectedValue === value,
+    status: status
+  }), React__default["default"].createElement(StyledLabel, {
+    htmlFor: value,
+    checked: selectedValue === value,
+    status: status
+  }, children));
+});
+
+module.exports = QuestionRadioOption;

package/cjs/helpers/index.d.ts

@@ -0,0 +1,50 @@
+import type { GetOrgLectureGetResponses, GetOrgMaterialQuizGetResponses, GetOrgMaterialQuizResponseGetResponses } from '@elice/types';
+import type { QuizOptionType } from '@elice/types/es/enums';
+interface OptionInfo {
+    content: string;
+    optionType: QuizOptionType;
+    answerIsSelected?: boolean;
+}
+interface AnswerInfo {
+    optionIdent: string;
+    text: string | null;
+    order: number | null;
+    isSelected: boolean;
+}
+export declare type Option = OptionInfo & Omit<AnswerInfo, 'optionIdent'>;
+export declare type OptionList = Option[];
+export declare function mergeOptionAndAnswerInfoList(materialQuiz: GetOrgMaterialQuizGetResponses['materialQuiz'], materialQuizResponse?: GetOrgMaterialQuizResponseGetResponses['quizResponse']): OptionList;
+export declare enum QuizResultStatus {
+    Correct = 0,
+    Wrong = 1,
+    Submitted = 2,
+    WrongNotSubmitted = 3,
+    NotSubmitted = 4
+}
+export declare function getQuizResultStatus(materialQuizResponse?: GetOrgMaterialQuizResponseGetResponses['quizResponse']): QuizResultStatus.Correct | QuizResultStatus.Wrong | QuizResultStatus.Submitted | QuizResultStatus.NotSubmitted;
+export declare const getOptionStatus: ({ isSelected, isActive, materialQuizResponse, }: {
+    isSelected: boolean;
+    isActive: boolean;
+    materialQuizResponse?: {
+        id: number;
+        answer: string | number[];
+        score: number | null;
+        autoScore: number | null;
+        manualScore: number | null;
+        isCompleted: boolean | null;
+        createdDatetime: number;
+        user: {
+            firstname: string;
+            fullname: string;
+            id: number;
+            lastname: "";
+            profileUrl: string | null;
+        };
+    } | undefined;
+}) => "correct" | "wrong" | undefined;
+export declare function checkUserLectureTestEnded(lecture?: GetOrgLectureGetResponses['lecture']): boolean;
+export declare function shouldResetOptions({ materialQuizResponse, }: {
+    materialQuizResponse?: GetOrgMaterialQuizResponseGetResponses['quizResponse'];
+}): boolean;
+export declare function getQuizResult(materialQuizResponse: GetOrgMaterialQuizResponseGetResponses['quizResponse']): boolean | undefined;
+export {};

package/cjs/helpers/index.js

@@ -0,0 +1,86 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var types = require('@elice/types');
+
+exports.QuizResultStatus = void 0;
+
+(function (QuizResultStatus) {
+  QuizResultStatus[QuizResultStatus["Correct"] = 0] = "Correct";
+  QuizResultStatus[QuizResultStatus["Wrong"] = 1] = "Wrong";
+  QuizResultStatus[QuizResultStatus["Submitted"] = 2] = "Submitted";
+  QuizResultStatus[QuizResultStatus["WrongNotSubmitted"] = 3] = "WrongNotSubmitted";
+  QuizResultStatus[QuizResultStatus["NotSubmitted"] = 4] = "NotSubmitted";
+})(exports.QuizResultStatus || (exports.QuizResultStatus = {}));
+
+function getQuizResultStatus(materialQuizResponse) {
+  if (materialQuizResponse && materialQuizResponse.isCompleted === true) {
+    return exports.QuizResultStatus.Correct;
+  }
+
+  if (materialQuizResponse && materialQuizResponse.isCompleted === false) {
+    return exports.QuizResultStatus.Wrong;
+  }
+
+  if (materialQuizResponse) {
+    return exports.QuizResultStatus.Submitted;
+  }
+
+  return exports.QuizResultStatus.NotSubmitted;
+}
+const getOptionStatus = ({
+  isSelected,
+  isActive,
+  materialQuizResponse
+}) => {
+  const status = getQuizResultStatus(materialQuizResponse);
+
+  if (isActive) {
+    return;
+  }
+
+  if (isSelected) {
+    if (status === exports.QuizResultStatus.Correct) {
+      return 'correct';
+    }
+
+    if (status === exports.QuizResultStatus.Wrong) {
+      return 'wrong';
+    }
+  }
+
+  return;
+};
+function checkUserLectureTestEnded(lecture) {
+  return (lecture === null || lecture === void 0 ? void 0 : lecture.testAdmissionStatus) === types.enums.TestAdmissionStatus.Completed;
+}
+function shouldResetOptions({
+  materialQuizResponse
+}) {
+  // when score is given(correct, wrong), reset selected option in order to select options from scratch
+  // score condition
+  // normal quiz - score is always given(not a null) as long as a user submits the answer
+  // test quiz - score is given if a user finishes test and "lecture.isTestScoreOpened(성적공개)" is valid
+  return [(materialQuizResponse === null || materialQuizResponse === void 0 ? void 0 : materialQuizResponse.score) !== null].every(Boolean);
+}
+function getQuizResult(materialQuizResponse) {
+  const status = getQuizResultStatus(materialQuizResponse);
+
+  switch (status) {
+    case exports.QuizResultStatus.Correct:
+      return true;
+
+    case exports.QuizResultStatus.Wrong:
+      return false;
+
+    default:
+      return;
+  }
+}
+
+exports.checkUserLectureTestEnded = checkUserLectureTestEnded;
+exports.getOptionStatus = getOptionStatus;
+exports.getQuizResult = getQuizResult;
+exports.getQuizResultStatus = getQuizResultStatus;
+exports.shouldResetOptions = shouldResetOptions;

package/cjs/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components/material-quiz';
+export * from './components/material-quiz-edit';
+export * from './components/shared';

package/cjs/index.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MaterialQuiz = require('./components/material-quiz/MaterialQuiz.js');
+var MaterialQuizInfo = require('./components/material-quiz/MaterialQuizInfo.js');
+var MaterialQuizEdit = require('./components/material-quiz-edit/MaterialQuizEdit.js');
+var QuizDraggbleDroppedOption = require('./components/shared/QuizDraggbleDroppedOption.js');
+var QuizDraggbleDummyOption = require('./components/shared/QuizDraggbleDummyOption.js');
+var QuizDraggbleOption = require('./components/shared/QuizDraggbleOption.js');
+var QuestionRadio = require('./components/shared/question-radio/QuestionRadio.js');
+var QuestionRadioOption = require('./components/shared/question-radio/QuestionRadioOption.js');
+var QuestionCheckbox = require('./components/shared/question-checkbox/QuestionCheckbox.js');
+var QuestionCheckboxOption = require('./components/shared/question-checkbox/QuestionCheckboxOption.js');
+
+
+
+exports.MaterialQuiz = MaterialQuiz;
+exports.MaterialQuizInfo = MaterialQuizInfo;
+exports.MaterialQuizEdit = MaterialQuizEdit;
+exports.QuizDraggbleDroppedOption = QuizDraggbleDroppedOption;
+exports.QuizDraggbleDummyOption = QuizDraggbleDummyOption;
+exports.QuizDraggbleOption = QuizDraggbleOption;
+exports.QuestionRadio = QuestionRadio;
+exports.QuestionRadioOption = QuestionRadioOption;
+exports.QuestionCheckbox = QuestionCheckbox;
+exports.QuestionCheckboxOption = QuestionCheckboxOption;

package/es/components/eb-sortable/EbDraggable.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="jquery" />
+/// <reference types="jqueryui" />
+import React from 'react';
+import 'jquery-ui/ui/widgets/draggable';
+interface EbDraggableProps {
+    id?: string;
+    className?: string;
+    connectWith?: JQuery.Selector;
+    disabled?: boolean;
+    revert?: boolean;
+    clone?: boolean;
+    onStart?: (event: JQueryEventObject, ui: JQueryUI.DraggableEventUIParams) => void;
+    onStop?: (event: JQueryEventObject, ui: JQueryUI.DraggableEventUIParams) => void;
+    onDrag?: (event: JQueryEventObject, ui: JQueryUI.DraggableEventUIParams) => void;
+    onCreate?: (event: JQueryEventObject, ui: JQueryUI.DraggableEventUIParams) => void;
+}
+declare const EbDraggable: React.FC<EbDraggableProps>;
+export default EbDraggable;