@rpg-engine/long-bow 0.4.82 → 0.4.83

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 (168) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +181 -181
  3. package/dist/long-bow.cjs.development.js +1587 -1595
  4. package/dist/long-bow.cjs.development.js.map +1 -1
  5. package/dist/long-bow.cjs.production.min.js +1 -1
  6. package/dist/long-bow.cjs.production.min.js.map +1 -1
  7. package/dist/long-bow.esm.js +1594 -1602
  8. package/dist/long-bow.esm.js.map +1 -1
  9. package/package.json +100 -100
  10. package/src/components/Abstractions/ModalPortal.tsx +22 -22
  11. package/src/components/Abstractions/SlotsContainer.tsx +62 -62
  12. package/src/components/Arrow/SelectArrow.tsx +69 -69
  13. package/src/components/Arrow/img/arrow01-left-clicked.png +0 -0
  14. package/src/components/Arrow/img/arrow01-left.png +0 -0
  15. package/src/components/Arrow/img/arrow01-right-clicked.png +0 -0
  16. package/src/components/Arrow/img/arrow01-right.png +0 -0
  17. package/src/components/Arrow/img/arrow02-left-clicked.png +0 -0
  18. package/src/components/Arrow/img/arrow02-left.png +0 -0
  19. package/src/components/Arrow/img/arrow02-right-clicked.png +0 -0
  20. package/src/components/Arrow/img/arrow02-right.png +0 -0
  21. package/src/components/Button.tsx +40 -40
  22. package/src/components/Character/CharacterSelection.tsx +98 -98
  23. package/src/components/CharacterStatus/CharacterStatus.tsx +120 -120
  24. package/src/components/Chat/Chat.tsx +196 -196
  25. package/src/components/Chatdeprecated/ChatDeprecated.tsx +198 -198
  26. package/src/components/CheckButton.tsx +65 -65
  27. package/src/components/CircularController/CircularController.tsx +282 -282
  28. package/src/components/ConfirmModal.tsx +87 -87
  29. package/src/components/CraftBook/CraftBook.tsx +286 -286
  30. package/src/components/CraftBook/CraftingRecipe.tsx +161 -161
  31. package/src/components/CraftBook/MockItems.ts +101 -101
  32. package/src/components/DraggableContainer.tsx +183 -183
  33. package/src/components/Dropdown.tsx +114 -114
  34. package/src/components/DropdownSelectorContainer.tsx +42 -42
  35. package/src/components/Equipment/EquipmentSet.tsx +199 -199
  36. package/src/components/HistoryDialog.tsx +104 -104
  37. package/src/components/Input.tsx +15 -15
  38. package/src/components/InputRadio.tsx +41 -41
  39. package/src/components/Item/Cards/ItemInfo.tsx +298 -298
  40. package/src/components/Item/Cards/ItemInfoDisplay.tsx +135 -135
  41. package/src/components/Item/Cards/ItemInfoWrapper.tsx +62 -62
  42. package/src/components/Item/Cards/ItemTooltip.tsx +83 -83
  43. package/src/components/Item/Cards/MobileItemTooltip.tsx +149 -149
  44. package/src/components/Item/Inventory/ErrorBoundary.tsx +42 -42
  45. package/src/components/Item/Inventory/ItemContainer.tsx +231 -231
  46. package/src/components/Item/Inventory/ItemContainerTypes.ts +6 -6
  47. package/src/components/Item/Inventory/ItemQuantitySelector.tsx +138 -138
  48. package/src/components/Item/Inventory/ItemSlot.tsx +595 -595
  49. package/src/components/Item/Inventory/itemContainerHelper.ts +175 -175
  50. package/src/components/ListMenu.tsx +63 -63
  51. package/src/components/Marketplace/BuyPanel.tsx +304 -304
  52. package/src/components/Marketplace/ManagmentPanel.tsx +255 -255
  53. package/src/components/Marketplace/Marketplace.tsx +106 -106
  54. package/src/components/Marketplace/MarketplaceRows.tsx +177 -177
  55. package/src/components/Marketplace/filters/index.tsx +67 -67
  56. package/src/components/Multitab/Tab.tsx +66 -66
  57. package/src/components/Multitab/TabBody.tsx +13 -13
  58. package/src/components/Multitab/TabsContainer.tsx +97 -97
  59. package/src/components/NPCDialog/NPCDialog.tsx +121 -121
  60. package/src/components/NPCDialog/NPCDialogText.tsx +113 -113
  61. package/src/components/NPCDialog/NPCMultiDialog.tsx +159 -159
  62. package/src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx +237 -237
  63. package/src/components/Pager.tsx +94 -94
  64. package/src/components/ProgressBar.tsx +102 -102
  65. package/src/components/PropertySelect/PropertySelect.tsx +106 -106
  66. package/src/components/QuestInfo/QuestInfo.tsx +233 -233
  67. package/src/components/QuestList.tsx +135 -135
  68. package/src/components/RPGUIContainer.tsx +47 -47
  69. package/src/components/RPGUIForceRenderStart.tsx +45 -45
  70. package/src/components/RPGUIRoot.tsx +14 -14
  71. package/src/components/RadioButton.tsx +53 -53
  72. package/src/components/RadioInput/RadioButton.tsx +96 -96
  73. package/src/components/RadioInput/RadioInput.tsx +102 -102
  74. package/src/components/RadioInput/instruments.ts +15 -15
  75. package/src/components/RangeSlider.tsx +78 -78
  76. package/src/components/RelativeListMenu.tsx +90 -90
  77. package/src/components/ScrollList.tsx +79 -79
  78. package/src/components/Shortcuts/Shortcuts.tsx +193 -193
  79. package/src/components/Shortcuts/ShortcutsSetter.tsx +139 -139
  80. package/src/components/Shortcuts/SingleShortcut.ts +82 -82
  81. package/src/components/Shortcuts/useShortcutCooldown.ts +23 -23
  82. package/src/components/SimpleProgressBar.tsx +62 -62
  83. package/src/components/SkillProgressBar.tsx +198 -206
  84. package/src/components/SkillsContainer.tsx +213 -213
  85. package/src/components/Spellbook/Spell.tsx +235 -235
  86. package/src/components/Spellbook/Spellbook.tsx +145 -145
  87. package/src/components/Spellbook/cards/MobileSpellTooltip.tsx +137 -137
  88. package/src/components/Spellbook/cards/SpellInfo.tsx +134 -134
  89. package/src/components/Spellbook/cards/SpellInfoDisplay.tsx +31 -31
  90. package/src/components/Spellbook/cards/SpellInfoWrapper.tsx +48 -48
  91. package/src/components/Spellbook/cards/SpellTooltip.tsx +70 -70
  92. package/src/components/Spellbook/constants.ts +7 -7
  93. package/src/components/Spellbook/mockSpells.ts +84 -84
  94. package/src/components/StaticBook/StaticBook.tsx +103 -103
  95. package/src/components/TextArea.tsx +11 -11
  96. package/src/components/TimeWidget/DayNightPeriod/DayNightPeriod.tsx +35 -35
  97. package/src/components/TimeWidget/TimeWidget.tsx +65 -65
  98. package/src/components/TradingMenu/TradingItemRow.tsx +199 -199
  99. package/src/components/TradingMenu/TradingMenu.tsx +219 -219
  100. package/src/components/TradingMenu/items.mock.ts +48 -48
  101. package/src/components/Truncate.tsx +25 -25
  102. package/src/components/itemSelector/ItemSelector.tsx +136 -136
  103. package/src/components/shared/Column.tsx +16 -16
  104. package/src/components/shared/Ellipsis.tsx +76 -76
  105. package/src/components/shared/SpriteFromAtlas.tsx +104 -104
  106. package/src/components/typography/DynamicText.tsx +49 -49
  107. package/src/constants/uiColors.ts +20 -20
  108. package/src/constants/uiDevices.ts +3 -3
  109. package/src/constants/uiFonts.ts +12 -12
  110. package/src/hooks/useEventListener.ts +21 -21
  111. package/src/hooks/useOutsideAlerter.ts +25 -25
  112. package/src/index.tsx +42 -42
  113. package/src/libs/CastingTypeHelper.ts +7 -7
  114. package/src/libs/StringHelpers.ts +3 -3
  115. package/src/libs/itemCounter.ts +21 -21
  116. package/src/mocks/atlas/entities/entities.json +20215 -20215
  117. package/src/mocks/atlas/icons/icons.json +735 -735
  118. package/src/mocks/atlas/items/items.json +12086 -12086
  119. package/src/mocks/equipmentSet.mocks.ts +391 -391
  120. package/src/mocks/itemContainer.mocks.ts +605 -605
  121. package/src/mocks/skills.mocks.ts +130 -130
  122. package/src/stories/Arrow.stories.tsx +26 -26
  123. package/src/stories/Button.stories.tsx +36 -36
  124. package/src/stories/CharacterSelection.stories.tsx +44 -44
  125. package/src/stories/CharacterStatus.stories.tsx +29 -29
  126. package/src/stories/Chat.stories.tsx +187 -187
  127. package/src/stories/ChatDeprecated.stories.tsx +170 -170
  128. package/src/stories/CheckButton.stories.tsx +48 -48
  129. package/src/stories/CircullarController.stories.tsx +37 -37
  130. package/src/stories/CraftBook.stories.tsx +42 -42
  131. package/src/stories/DayNightPeriod.stories.tsx +27 -27
  132. package/src/stories/DraggableContainer.stories.tsx +28 -28
  133. package/src/stories/Dropdown.stories.tsx +46 -46
  134. package/src/stories/DropdownSelectorContainer.stories.tsx +41 -41
  135. package/src/stories/EquipmentSet.stories.tsx +65 -65
  136. package/src/stories/HistoryDialog.stories.tsx +61 -61
  137. package/src/stories/ItemContainer.stories.tsx +201 -201
  138. package/src/stories/ItemInfoDisplay.stories.tsx +33 -33
  139. package/src/stories/ItemQuantitySelector.stories.tsx +26 -26
  140. package/src/stories/ItemSelector.stories.tsx +77 -77
  141. package/src/stories/ItemTradingComponent.stories.tsx +35 -35
  142. package/src/stories/ListMenu.stories.tsx +56 -56
  143. package/src/stories/Marketplace.stories.tsx +57 -57
  144. package/src/stories/MarketplaceRows.stories.tsx +27 -27
  145. package/src/stories/Multitab.stories.tsx +51 -51
  146. package/src/stories/NPCDialog.stories.tsx +130 -130
  147. package/src/stories/NPCMultiDialog.stories.tsx +71 -71
  148. package/src/stories/ProgressBar.stories.tsx +24 -24
  149. package/src/stories/PropertySelect.stories.tsx +40 -40
  150. package/src/stories/QuestInfo.stories.tsx +107 -107
  151. package/src/stories/QuestList.stories.tsx +82 -82
  152. package/src/stories/RPGUIContainers.stories.tsx +42 -42
  153. package/src/stories/RadioButton.stories.tsx +49 -49
  154. package/src/stories/RadioInput.stories.tsx +34 -34
  155. package/src/stories/RangeSlider.stories.tsx +64 -64
  156. package/src/stories/ScrollList.stories.tsx +85 -85
  157. package/src/stories/Shortcuts.stories.tsx +39 -39
  158. package/src/stories/SimpleProgressBar.stories.tsx +22 -22
  159. package/src/stories/SkillProgressBar.stories.tsx +34 -34
  160. package/src/stories/SkillsContainer.stories.tsx +35 -35
  161. package/src/stories/SpellInfoDisplay.stories.tsx +27 -27
  162. package/src/stories/Spellbook.stories.tsx +104 -104
  163. package/src/stories/StaticBook.stories.tsx +32 -32
  164. package/src/stories/Text.stories.tsx +42 -42
  165. package/src/stories/TimeWidget.stories.tsx +27 -27
  166. package/src/stories/TradingMenu.stories.tsx +47 -47
  167. package/src/types/eventTypes.ts +4 -4
  168. 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.82",
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.15",
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.83",
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.15",
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
+ `;