@rpg-engine/long-bow 0.4.7 → 0.4.8

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.
Files changed (177) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +181 -181
  3. package/dist/components/ConfirmModal.d.ts +8 -0
  4. package/dist/components/DraggableContainer.d.ts +1 -0
  5. package/dist/components/Item/Inventory/ItemSlot.d.ts +7 -7
  6. package/dist/components/Marketplace/BuyPanel.d.ts +22 -0
  7. package/dist/components/Marketplace/ManagmentPanel.d.ts +18 -0
  8. package/dist/components/Marketplace/Marketplace.d.ts +22 -9
  9. package/dist/components/Marketplace/MarketplaceRows.d.ts +3 -1
  10. package/dist/components/Marketplace/{__mocks__ → filters}/index.d.ts +1 -3
  11. package/dist/components/Pager.d.ts +9 -0
  12. package/dist/long-bow.cjs.development.js +1540 -1163
  13. package/dist/long-bow.cjs.development.js.map +1 -1
  14. package/dist/long-bow.cjs.production.min.js +1 -1
  15. package/dist/long-bow.cjs.production.min.js.map +1 -1
  16. package/dist/long-bow.esm.js +1594 -1217
  17. package/dist/long-bow.esm.js.map +1 -1
  18. package/package.json +100 -100
  19. package/src/components/Abstractions/ModalPortal.tsx +22 -22
  20. package/src/components/Abstractions/SlotsContainer.tsx +62 -62
  21. package/src/components/Arrow/SelectArrow.tsx +69 -69
  22. package/src/components/Arrow/img/arrow01-left-clicked.png +0 -0
  23. package/src/components/Arrow/img/arrow01-left.png +0 -0
  24. package/src/components/Arrow/img/arrow01-right-clicked.png +0 -0
  25. package/src/components/Arrow/img/arrow01-right.png +0 -0
  26. package/src/components/Arrow/img/arrow02-left-clicked.png +0 -0
  27. package/src/components/Arrow/img/arrow02-left.png +0 -0
  28. package/src/components/Arrow/img/arrow02-right-clicked.png +0 -0
  29. package/src/components/Arrow/img/arrow02-right.png +0 -0
  30. package/src/components/Button.tsx +40 -40
  31. package/src/components/Character/CharacterSelection.tsx +98 -98
  32. package/src/components/CharacterStatus/CharacterStatus.tsx +120 -120
  33. package/src/components/Chat/Chat.tsx +196 -196
  34. package/src/components/Chatdeprecated/ChatDeprecated.tsx +198 -198
  35. package/src/components/CheckButton.tsx +65 -65
  36. package/src/components/CircularController/CircularController.tsx +282 -282
  37. package/src/components/ConfirmModal.tsx +87 -0
  38. package/src/components/CraftBook/CraftBook.tsx +286 -286
  39. package/src/components/CraftBook/CraftingRecipe.tsx +161 -161
  40. package/src/components/CraftBook/MockItems.ts +101 -101
  41. package/src/components/DraggableContainer.tsx +183 -180
  42. package/src/components/Dropdown.tsx +14 -6
  43. package/src/components/DropdownSelectorContainer.tsx +42 -42
  44. package/src/components/Equipment/EquipmentSet.tsx +199 -199
  45. package/src/components/HistoryDialog.tsx +104 -104
  46. package/src/components/Input.tsx +15 -15
  47. package/src/components/InputRadio.tsx +41 -41
  48. package/src/components/Item/Cards/ItemInfo.tsx +298 -298
  49. package/src/components/Item/Cards/ItemInfoDisplay.tsx +135 -135
  50. package/src/components/Item/Cards/ItemInfoWrapper.tsx +62 -62
  51. package/src/components/Item/Cards/ItemTooltip.tsx +83 -83
  52. package/src/components/Item/Cards/MobileItemTooltip.tsx +149 -149
  53. package/src/components/Item/Inventory/ErrorBoundary.tsx +42 -42
  54. package/src/components/Item/Inventory/ItemContainer.tsx +231 -231
  55. package/src/components/Item/Inventory/ItemContainerTypes.ts +6 -6
  56. package/src/components/Item/Inventory/ItemQuantitySelector.tsx +138 -138
  57. package/src/components/Item/Inventory/ItemSlot.tsx +595 -580
  58. package/src/components/Item/Inventory/itemContainerHelper.ts +175 -175
  59. package/src/components/ListMenu.tsx +63 -63
  60. package/src/components/Marketplace/BuyPanel.tsx +296 -0
  61. package/src/components/Marketplace/ManagmentPanel.tsx +247 -0
  62. package/src/components/Marketplace/Marketplace.tsx +106 -132
  63. package/src/components/Marketplace/MarketplaceRows.tsx +161 -171
  64. package/src/components/Marketplace/{__mocks__ → filters}/index.tsx +67 -65
  65. package/src/components/Multitab/Tab.tsx +66 -66
  66. package/src/components/Multitab/TabBody.tsx +13 -13
  67. package/src/components/Multitab/TabsContainer.tsx +97 -97
  68. package/src/components/NPCDialog/NPCDialog.tsx +121 -121
  69. package/src/components/NPCDialog/NPCDialogText.tsx +113 -113
  70. package/src/components/NPCDialog/NPCMultiDialog.tsx +159 -159
  71. package/src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx +237 -237
  72. package/src/components/Pager.tsx +94 -0
  73. package/src/components/ProgressBar.tsx +95 -95
  74. package/src/components/PropertySelect/PropertySelect.tsx +106 -106
  75. package/src/components/QuestInfo/QuestInfo.tsx +233 -233
  76. package/src/components/QuestList.tsx +135 -135
  77. package/src/components/RPGUIContainer.tsx +47 -47
  78. package/src/components/RPGUIForceRenderStart.tsx +45 -45
  79. package/src/components/RPGUIRoot.tsx +14 -14
  80. package/src/components/RadioButton.tsx +53 -53
  81. package/src/components/RadioInput/RadioButton.tsx +96 -96
  82. package/src/components/RadioInput/RadioInput.tsx +102 -102
  83. package/src/components/RadioInput/instruments.ts +15 -15
  84. package/src/components/RangeSlider.tsx +78 -78
  85. package/src/components/RelativeListMenu.tsx +90 -90
  86. package/src/components/ScrollList.tsx +79 -79
  87. package/src/components/Shortcuts/Shortcuts.tsx +193 -193
  88. package/src/components/Shortcuts/ShortcutsSetter.tsx +139 -139
  89. package/src/components/Shortcuts/SingleShortcut.ts +82 -82
  90. package/src/components/Shortcuts/useShortcutCooldown.ts +23 -23
  91. package/src/components/SimpleProgressBar.tsx +62 -62
  92. package/src/components/SkillProgressBar.tsx +198 -198
  93. package/src/components/SkillsContainer.tsx +213 -213
  94. package/src/components/Spellbook/Spell.tsx +235 -236
  95. package/src/components/Spellbook/Spellbook.tsx +145 -161
  96. package/src/components/Spellbook/cards/MobileSpellTooltip.tsx +137 -137
  97. package/src/components/Spellbook/cards/SpellInfo.tsx +134 -134
  98. package/src/components/Spellbook/cards/SpellInfoDisplay.tsx +31 -31
  99. package/src/components/Spellbook/cards/SpellInfoWrapper.tsx +48 -48
  100. package/src/components/Spellbook/cards/SpellTooltip.tsx +70 -70
  101. package/src/components/Spellbook/constants.ts +7 -7
  102. package/src/components/Spellbook/mockSpells.ts +84 -84
  103. package/src/components/StaticBook/StaticBook.tsx +103 -103
  104. package/src/components/TextArea.tsx +11 -11
  105. package/src/components/TimeWidget/DayNightPeriod/DayNightPeriod.tsx +35 -35
  106. package/src/components/TimeWidget/TimeWidget.tsx +65 -65
  107. package/src/components/TradingMenu/TradingItemRow.tsx +199 -199
  108. package/src/components/TradingMenu/TradingMenu.tsx +219 -219
  109. package/src/components/TradingMenu/items.mock.ts +48 -48
  110. package/src/components/Truncate.tsx +25 -25
  111. package/src/components/itemSelector/ItemSelector.tsx +136 -136
  112. package/src/components/shared/Column.tsx +16 -16
  113. package/src/components/shared/Ellipsis.tsx +76 -68
  114. package/src/components/shared/SpriteFromAtlas.tsx +104 -104
  115. package/src/components/typography/DynamicText.tsx +49 -49
  116. package/src/constants/uiColors.ts +20 -20
  117. package/src/constants/uiDevices.ts +3 -3
  118. package/src/constants/uiFonts.ts +12 -12
  119. package/src/hooks/useEventListener.ts +21 -21
  120. package/src/hooks/useOutsideAlerter.ts +25 -25
  121. package/src/index.tsx +42 -42
  122. package/src/libs/CastingTypeHelper.ts +7 -7
  123. package/src/libs/StringHelpers.ts +3 -3
  124. package/src/libs/itemCounter.ts +21 -21
  125. package/src/mocks/atlas/entities/entities.json +20215 -20215
  126. package/src/mocks/atlas/icons/icons.json +735 -735
  127. package/src/mocks/atlas/items/items.json +12086 -12086
  128. package/src/mocks/equipmentSet.mocks.ts +391 -391
  129. package/src/mocks/itemContainer.mocks.ts +605 -605
  130. package/src/mocks/skills.mocks.ts +130 -130
  131. package/src/stories/Arrow.stories.tsx +26 -26
  132. package/src/stories/Button.stories.tsx +36 -36
  133. package/src/stories/CharacterSelection.stories.tsx +44 -44
  134. package/src/stories/CharacterStatus.stories.tsx +29 -29
  135. package/src/stories/Chat.stories.tsx +187 -187
  136. package/src/stories/ChatDeprecated.stories.tsx +170 -170
  137. package/src/stories/CheckButton.stories.tsx +48 -48
  138. package/src/stories/CircullarController.stories.tsx +37 -37
  139. package/src/stories/CraftBook.stories.tsx +42 -42
  140. package/src/stories/DayNightPeriod.stories.tsx +27 -27
  141. package/src/stories/DraggableContainer.stories.tsx +28 -28
  142. package/src/stories/Dropdown.stories.tsx +46 -46
  143. package/src/stories/DropdownSelectorContainer.stories.tsx +41 -41
  144. package/src/stories/EquipmentSet.stories.tsx +65 -65
  145. package/src/stories/HistoryDialog.stories.tsx +61 -61
  146. package/src/stories/ItemContainer.stories.tsx +201 -201
  147. package/src/stories/ItemInfoDisplay.stories.tsx +33 -33
  148. package/src/stories/ItemQuantitySelector.stories.tsx +26 -26
  149. package/src/stories/ItemSelector.stories.tsx +77 -77
  150. package/src/stories/ItemTradingComponent.stories.tsx +35 -35
  151. package/src/stories/ListMenu.stories.tsx +56 -56
  152. package/src/stories/Marketplace.stories.tsx +53 -42
  153. package/src/stories/MarketplaceRows.stories.tsx +28 -28
  154. package/src/stories/Multitab.stories.tsx +51 -51
  155. package/src/stories/NPCDialog.stories.tsx +130 -130
  156. package/src/stories/NPCMultiDialog.stories.tsx +71 -71
  157. package/src/stories/ProgressBar.stories.tsx +23 -23
  158. package/src/stories/PropertySelect.stories.tsx +40 -40
  159. package/src/stories/QuestInfo.stories.tsx +107 -107
  160. package/src/stories/QuestList.stories.tsx +82 -82
  161. package/src/stories/RPGUIContainers.stories.tsx +42 -42
  162. package/src/stories/RadioButton.stories.tsx +49 -49
  163. package/src/stories/RadioInput.stories.tsx +34 -34
  164. package/src/stories/RangeSlider.stories.tsx +64 -64
  165. package/src/stories/ScrollList.stories.tsx +85 -85
  166. package/src/stories/Shortcuts.stories.tsx +39 -39
  167. package/src/stories/SimpleProgressBar.stories.tsx +22 -22
  168. package/src/stories/SkillProgressBar.stories.tsx +34 -34
  169. package/src/stories/SkillsContainer.stories.tsx +35 -35
  170. package/src/stories/SpellInfoDisplay.stories.tsx +27 -27
  171. package/src/stories/Spellbook.stories.tsx +104 -104
  172. package/src/stories/StaticBook.stories.tsx +32 -32
  173. package/src/stories/Text.stories.tsx +42 -42
  174. package/src/stories/TimeWidget.stories.tsx +27 -27
  175. package/src/stories/TradingMenu.stories.tsx +47 -47
  176. package/src/types/eventTypes.ts +4 -4
  177. package/src/types/index.d.ts +2 -2
package/package.json CHANGED
@@ -1,100 +1,100 @@
1
- {
2
- "name": "@rpg-engine/long-bow",
3
- "version": "0.4.7",
4
- "license": "MIT",
5
- "main": "dist/index.js",
6
- "typings": "dist/index.d.ts",
7
- "publishConfig": {
8
- "access": "public"
9
- },
10
- "directories": {
11
- "dist": "dist",
12
- "src": "src"
13
- },
14
- "files": [
15
- "dist",
16
- "src"
17
- ],
18
- "engines": {
19
- "node": ">=10"
20
- },
21
- "scripts": {
22
- "dev": "yarn install && start-storybook -p 6006",
23
- "start": "tsdx watch",
24
- "build": "tsdx build",
25
- "test": "tsdx test --passWithNoTests",
26
- "lint": "tsdx lint",
27
- "prepare": "tsdx build",
28
- "size": "size-limit",
29
- "analyze": "size-limit --why",
30
- "storybook": "start-storybook -p 6006",
31
- "build-storybook": "build-storybook",
32
- "configure": "./environment/download-credentials.sh",
33
- "update:shared-deps": "yarn add @rpg-engine/shared"
34
- },
35
- "peerDependencies": {
36
- "react": ">=16"
37
- },
38
- "prettier": {
39
- "printWidth": 80,
40
- "semi": true,
41
- "singleQuote": true,
42
- "trailingComma": "es5"
43
- },
44
- "author": "Joao Paulo Furtado",
45
- "module": "dist/long-bow.esm.js",
46
- "size-limit": [
47
- {
48
- "path": "dist/long-bow.cjs.production.min.js",
49
- "limit": "10 KB"
50
- },
51
- {
52
- "path": "dist/long-bow.esm.js",
53
- "limit": "10 KB"
54
- }
55
- ],
56
- "devDependencies": {
57
- "@babel/core": "^7.17.7",
58
- "@size-limit/preset-small-lib": "^7.0.8",
59
- "@storybook/addon-essentials": "^6.5.10",
60
- "@storybook/addon-info": "^5.3.21",
61
- "@storybook/addon-links": "^6.5.10",
62
- "@storybook/addons": "^6.5.10",
63
- "@storybook/react": "^6.5.10",
64
- "@types/react": "^18.0.14",
65
- "@types/react-dom": "^18.0.5",
66
- "@types/styled-components": "^5.1.24",
67
- "@types/uuid": "^8.3.4",
68
- "babel-loader": "^8.2.3",
69
- "babel-plugin-styled-components": "^2.0.6",
70
- "husky": "^7.0.4",
71
- "pretty-quick": "^3.1.3",
72
- "react": "^17.0.2",
73
- "react-dom": "^17.0.2",
74
- "react-is": "^17.0.2",
75
- "rollup-plugin-image-base64": "^1.0.0",
76
- "size-limit": "^7.0.8",
77
- "storybook-dark-mode": "^1.1.0",
78
- "styled-components": "^5.3.3",
79
- "tsdx": "^0.14.1",
80
- "tslib": "^2.3.1",
81
- "typescript": "^4.6.2",
82
- "uuid": "^8.3.2"
83
- },
84
- "dependencies": {
85
- "@rollup/plugin-image": "^2.1.1",
86
- "@rpg-engine/shared": "^0.8.11",
87
- "dayjs": "^1.11.2",
88
- "font-awesome": "^4.7.0",
89
- "fs-extra": "^10.1.0",
90
- "lodash": "^4.17.21",
91
- "lodash-es": "^4.17.21",
92
- "mobx": "^6.6.0",
93
- "mobx-react": "^7.5.0",
94
- "react-draggable": "^4.4.5",
95
- "react-error-boundary": "^3.1.4",
96
- "react-icons": "^4.7.1",
97
- "rollup-plugin-image-files": "^1.4.2",
98
- "rpgui": "^1.0.3"
99
- }
100
- }
1
+ {
2
+ "name": "@rpg-engine/long-bow",
3
+ "version": "0.4.8",
4
+ "license": "MIT",
5
+ "main": "dist/index.js",
6
+ "typings": "dist/index.d.ts",
7
+ "publishConfig": {
8
+ "access": "public"
9
+ },
10
+ "directories": {
11
+ "dist": "dist",
12
+ "src": "src"
13
+ },
14
+ "files": [
15
+ "dist",
16
+ "src"
17
+ ],
18
+ "engines": {
19
+ "node": ">=10"
20
+ },
21
+ "scripts": {
22
+ "dev": "yarn install && start-storybook -p 6006",
23
+ "start": "tsdx watch",
24
+ "build": "tsdx build",
25
+ "test": "tsdx test --passWithNoTests",
26
+ "lint": "tsdx lint",
27
+ "prepare": "tsdx build",
28
+ "size": "size-limit",
29
+ "analyze": "size-limit --why",
30
+ "storybook": "start-storybook -p 6006",
31
+ "build-storybook": "build-storybook",
32
+ "configure": "./environment/download-credentials.sh",
33
+ "update:shared-deps": "yarn add @rpg-engine/shared"
34
+ },
35
+ "peerDependencies": {
36
+ "react": ">=16"
37
+ },
38
+ "prettier": {
39
+ "printWidth": 80,
40
+ "semi": true,
41
+ "singleQuote": true,
42
+ "trailingComma": "es5"
43
+ },
44
+ "author": "Joao Paulo Furtado",
45
+ "module": "dist/long-bow.esm.js",
46
+ "size-limit": [
47
+ {
48
+ "path": "dist/long-bow.cjs.production.min.js",
49
+ "limit": "10 KB"
50
+ },
51
+ {
52
+ "path": "dist/long-bow.esm.js",
53
+ "limit": "10 KB"
54
+ }
55
+ ],
56
+ "devDependencies": {
57
+ "@babel/core": "^7.17.7",
58
+ "@size-limit/preset-small-lib": "^7.0.8",
59
+ "@storybook/addon-essentials": "^6.5.10",
60
+ "@storybook/addon-info": "^5.3.21",
61
+ "@storybook/addon-links": "^6.5.10",
62
+ "@storybook/addons": "^6.5.10",
63
+ "@storybook/react": "^6.5.10",
64
+ "@types/react": "^18.0.14",
65
+ "@types/react-dom": "^18.0.5",
66
+ "@types/styled-components": "^5.1.24",
67
+ "@types/uuid": "^8.3.4",
68
+ "babel-loader": "^8.2.3",
69
+ "babel-plugin-styled-components": "^2.0.6",
70
+ "husky": "^7.0.4",
71
+ "pretty-quick": "^3.1.3",
72
+ "react": "^17.0.2",
73
+ "react-dom": "^17.0.2",
74
+ "react-is": "^17.0.2",
75
+ "rollup-plugin-image-base64": "^1.0.0",
76
+ "size-limit": "^7.0.8",
77
+ "storybook-dark-mode": "^1.1.0",
78
+ "styled-components": "^5.3.3",
79
+ "tsdx": "^0.14.1",
80
+ "tslib": "^2.3.1",
81
+ "typescript": "^4.6.2",
82
+ "uuid": "^8.3.2"
83
+ },
84
+ "dependencies": {
85
+ "@rollup/plugin-image": "^2.1.1",
86
+ "@rpg-engine/shared": "^0.8.13",
87
+ "dayjs": "^1.11.2",
88
+ "font-awesome": "^4.7.0",
89
+ "fs-extra": "^10.1.0",
90
+ "lodash": "^4.17.21",
91
+ "lodash-es": "^4.17.21",
92
+ "mobx": "^6.6.0",
93
+ "mobx-react": "^7.5.0",
94
+ "react-draggable": "^4.4.5",
95
+ "react-error-boundary": "^3.1.4",
96
+ "react-icons": "^4.7.1",
97
+ "rollup-plugin-image-files": "^1.4.2",
98
+ "rpgui": "^1.0.3"
99
+ }
100
+ }
@@ -1,22 +1,22 @@
1
- import React from 'react';
2
- import ReactDOM from 'react-dom';
3
- import styled from 'styled-components';
4
-
5
- const modalRoot = document.getElementById('modal-root')!;
6
-
7
- interface ModalPortalProps {
8
- children: React.ReactNode;
9
- }
10
-
11
- const ModalPortal: React.FC<ModalPortalProps> = ({ children }) => {
12
- return ReactDOM.createPortal(
13
- <Container className="rpgui-content">{children}</Container>,
14
- modalRoot
15
- );
16
- };
17
-
18
- const Container = styled.div`
19
- position: static !important;
20
- `;
21
-
22
- export default ModalPortal;
1
+ import React from 'react';
2
+ import ReactDOM from 'react-dom';
3
+ import styled from 'styled-components';
4
+
5
+ const modalRoot = document.getElementById('modal-root')!;
6
+
7
+ interface ModalPortalProps {
8
+ children: React.ReactNode;
9
+ }
10
+
11
+ const ModalPortal: React.FC<ModalPortalProps> = ({ children }) => {
12
+ return ReactDOM.createPortal(
13
+ <Container className="rpgui-content">{children}</Container>,
14
+ modalRoot
15
+ );
16
+ };
17
+
18
+ const Container = styled.div`
19
+ position: static !important;
20
+ `;
21
+
22
+ export default ModalPortal;
@@ -1,62 +1,62 @@
1
- import React from 'react';
2
- import { IPosition } from '../../types/eventTypes';
3
- import { DraggableContainer } from '../DraggableContainer';
4
- import { RPGUIContainerTypes } from '../RPGUIContainer';
5
-
6
- interface IProps {
7
- children: React.ReactNode;
8
- title: string;
9
- onClose?: () => void;
10
- onPositionChange?: (position: IPosition) => void;
11
- onPositionChangeEnd?: (position: IPosition) => void;
12
- onPositionChangeStart?: (position: IPosition) => void;
13
- onOutsideClick?: () => void;
14
- initialPosition?: IPosition;
15
- scale?: number;
16
- }
17
-
18
- export const SlotsContainer: React.FC<IProps> = ({
19
- children,
20
- title,
21
- onClose,
22
- onPositionChange,
23
- onPositionChangeEnd,
24
- onPositionChangeStart,
25
- onOutsideClick,
26
- initialPosition,
27
- scale,
28
- }) => {
29
- return (
30
- <DraggableContainer
31
- title={title}
32
- type={RPGUIContainerTypes.Framed}
33
- onCloseButton={() => {
34
- if (onClose) {
35
- onClose();
36
- }
37
- }}
38
- width="400px"
39
- cancelDrag=".item-container-body, #shortcuts_list"
40
- onPositionChange={({ x, y }) => {
41
- if (onPositionChange) {
42
- onPositionChange({ x, y });
43
- }
44
- }}
45
- onPositionChangeEnd={({ x, y }) => {
46
- if (onPositionChangeEnd) {
47
- onPositionChangeEnd({ x, y });
48
- }
49
- }}
50
- onPositionChangeStart={({ x, y }) => {
51
- if (onPositionChangeStart) {
52
- onPositionChangeStart({ x, y });
53
- }
54
- }}
55
- onOutsideClick={onOutsideClick}
56
- initialPosition={initialPosition}
57
- scale={scale}
58
- >
59
- {children}
60
- </DraggableContainer>
61
- );
62
- };
1
+ import React from 'react';
2
+ import { IPosition } from '../../types/eventTypes';
3
+ import { DraggableContainer } from '../DraggableContainer';
4
+ import { RPGUIContainerTypes } from '../RPGUIContainer';
5
+
6
+ interface IProps {
7
+ children: React.ReactNode;
8
+ title: string;
9
+ onClose?: () => void;
10
+ onPositionChange?: (position: IPosition) => void;
11
+ onPositionChangeEnd?: (position: IPosition) => void;
12
+ onPositionChangeStart?: (position: IPosition) => void;
13
+ onOutsideClick?: () => void;
14
+ initialPosition?: IPosition;
15
+ scale?: number;
16
+ }
17
+
18
+ export const SlotsContainer: React.FC<IProps> = ({
19
+ children,
20
+ title,
21
+ onClose,
22
+ onPositionChange,
23
+ onPositionChangeEnd,
24
+ onPositionChangeStart,
25
+ onOutsideClick,
26
+ initialPosition,
27
+ scale,
28
+ }) => {
29
+ return (
30
+ <DraggableContainer
31
+ title={title}
32
+ type={RPGUIContainerTypes.Framed}
33
+ onCloseButton={() => {
34
+ if (onClose) {
35
+ onClose();
36
+ }
37
+ }}
38
+ width="400px"
39
+ cancelDrag=".item-container-body, #shortcuts_list"
40
+ onPositionChange={({ x, y }) => {
41
+ if (onPositionChange) {
42
+ onPositionChange({ x, y });
43
+ }
44
+ }}
45
+ onPositionChangeEnd={({ x, y }) => {
46
+ if (onPositionChangeEnd) {
47
+ onPositionChangeEnd({ x, y });
48
+ }
49
+ }}
50
+ onPositionChangeStart={({ x, y }) => {
51
+ if (onPositionChangeStart) {
52
+ onPositionChangeStart({ x, y });
53
+ }
54
+ }}
55
+ onOutsideClick={onOutsideClick}
56
+ initialPosition={initialPosition}
57
+ scale={scale}
58
+ >
59
+ {children}
60
+ </DraggableContainer>
61
+ );
62
+ };
@@ -1,69 +1,69 @@
1
- import React from 'react';
2
- import styled from 'styled-components';
3
- import LeftArrowClickIcon from './img/arrow01-left-clicked.png';
4
- import LeftArrowIcon from './img/arrow01-left.png';
5
- import RightArrowClickIcon from './img/arrow01-right-clicked.png';
6
- import RightArrowIcon from './img/arrow01-right.png';
7
-
8
- export interface ArrowBarProps extends React.HTMLAttributes<HTMLDivElement> {
9
- direction: 'right' | 'left';
10
- onPointerDown: () => void;
11
- size?: number;
12
- }
13
-
14
- export const SelectArrow: React.FC<ArrowBarProps> = ({
15
- direction = 'left',
16
- size,
17
- onPointerDown,
18
- ...props
19
- }) => {
20
- return (
21
- <>
22
- {direction === 'left' ? (
23
- <LeftArrow
24
- size={size}
25
- onPointerDown={() => onPointerDown()}
26
- {...props}
27
- ></LeftArrow>
28
- ) : (
29
- <RightArrow
30
- size={size}
31
- onPointerDown={() => onPointerDown()}
32
- {...props}
33
- ></RightArrow>
34
- )}
35
- </>
36
- );
37
- };
38
-
39
- interface IArrowProps {
40
- size?: number;
41
- }
42
-
43
- const LeftArrow = styled.span<IArrowProps>`
44
- background-image: url(${LeftArrowIcon});
45
- background-size: 100% 100%;
46
- left: 0;
47
- position: absolute;
48
- width: ${props => props.size || 40}px;
49
- height: ${props => props.size || 42}px;
50
- :active {
51
- background-image: url(${LeftArrowClickIcon});
52
- }
53
- z-index: 2;
54
- `;
55
-
56
- const RightArrow = styled.span<IArrowProps>`
57
- background-image: url(${RightArrowIcon});
58
- right: 0;
59
- position: absolute;
60
- width: ${props => props.size || 40}px;
61
- height: ${props => props.size || 42}px;
62
- background-size: 100% 100%;
63
- :active {
64
- background-image: url(${RightArrowClickIcon});
65
- }
66
- z-index: 2;
67
- `;
68
-
69
- export default SelectArrow;
1
+ import React from 'react';
2
+ import styled from 'styled-components';
3
+ import LeftArrowClickIcon from './img/arrow01-left-clicked.png';
4
+ import LeftArrowIcon from './img/arrow01-left.png';
5
+ import RightArrowClickIcon from './img/arrow01-right-clicked.png';
6
+ import RightArrowIcon from './img/arrow01-right.png';
7
+
8
+ export interface ArrowBarProps extends React.HTMLAttributes<HTMLDivElement> {
9
+ direction: 'right' | 'left';
10
+ onPointerDown: () => void;
11
+ size?: number;
12
+ }
13
+
14
+ export const SelectArrow: React.FC<ArrowBarProps> = ({
15
+ direction = 'left',
16
+ size,
17
+ onPointerDown,
18
+ ...props
19
+ }) => {
20
+ return (
21
+ <>
22
+ {direction === 'left' ? (
23
+ <LeftArrow
24
+ size={size}
25
+ onPointerDown={() => onPointerDown()}
26
+ {...props}
27
+ ></LeftArrow>
28
+ ) : (
29
+ <RightArrow
30
+ size={size}
31
+ onPointerDown={() => onPointerDown()}
32
+ {...props}
33
+ ></RightArrow>
34
+ )}
35
+ </>
36
+ );
37
+ };
38
+
39
+ interface IArrowProps {
40
+ size?: number;
41
+ }
42
+
43
+ const LeftArrow = styled.span<IArrowProps>`
44
+ background-image: url(${LeftArrowIcon});
45
+ background-size: 100% 100%;
46
+ left: 0;
47
+ position: absolute;
48
+ width: ${props => props.size || 40}px;
49
+ height: ${props => props.size || 42}px;
50
+ :active {
51
+ background-image: url(${LeftArrowClickIcon});
52
+ }
53
+ z-index: 2;
54
+ `;
55
+
56
+ const RightArrow = styled.span<IArrowProps>`
57
+ background-image: url(${RightArrowIcon});
58
+ right: 0;
59
+ position: absolute;
60
+ width: ${props => props.size || 40}px;
61
+ height: ${props => props.size || 42}px;
62
+ background-size: 100% 100%;
63
+ :active {
64
+ background-image: url(${RightArrowClickIcon});
65
+ }
66
+ z-index: 2;
67
+ `;
68
+
69
+ export default SelectArrow;
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
@@ -1,40 +1,40 @@
1
- import React from 'react';
2
- import styled from 'styled-components';
3
- import { uiFonts } from '../constants/uiFonts';
4
-
5
- export enum ButtonTypes {
6
- RPGUIButton = 'rpgui-button',
7
- RPGUIGoldButton = 'rpgui-button golden',
8
- }
9
-
10
- export interface IButtonProps
11
- extends React.ButtonHTMLAttributes<HTMLButtonElement> {
12
- disabled?: boolean;
13
- children: React.ReactNode;
14
- buttonType: ButtonTypes;
15
- onPointerDown?: (e: any) => void;
16
- }
17
-
18
- export const Button = ({
19
- disabled = false,
20
- children,
21
- buttonType,
22
- onPointerDown,
23
- ...props
24
- }: IButtonProps) => {
25
- return (
26
- <ButtonContainer
27
- className={`${buttonType}`}
28
- disabled={disabled}
29
- {...props}
30
- onPointerDown={onPointerDown}
31
- >
32
- <p>{children}</p>
33
- </ButtonContainer>
34
- );
35
- };
36
-
37
- const ButtonContainer = styled.button`
38
- height: 45px;
39
- font-size: ${uiFonts.size.small};
40
- `;
1
+ import React from 'react';
2
+ import styled from 'styled-components';
3
+ import { uiFonts } from '../constants/uiFonts';
4
+
5
+ export enum ButtonTypes {
6
+ RPGUIButton = 'rpgui-button',
7
+ RPGUIGoldButton = 'rpgui-button golden',
8
+ }
9
+
10
+ export interface IButtonProps
11
+ extends React.ButtonHTMLAttributes<HTMLButtonElement> {
12
+ disabled?: boolean;
13
+ children: React.ReactNode;
14
+ buttonType: ButtonTypes;
15
+ onPointerDown?: (e: any) => void;
16
+ }
17
+
18
+ export const Button = ({
19
+ disabled = false,
20
+ children,
21
+ buttonType,
22
+ onPointerDown,
23
+ ...props
24
+ }: IButtonProps) => {
25
+ return (
26
+ <ButtonContainer
27
+ className={`${buttonType}`}
28
+ disabled={disabled}
29
+ {...props}
30
+ onPointerDown={onPointerDown}
31
+ >
32
+ <p>{children}</p>
33
+ </ButtonContainer>
34
+ );
35
+ };
36
+
37
+ const ButtonContainer = styled.button`
38
+ height: 45px;
39
+ font-size: ${uiFonts.size.small};
40
+ `;